Processo dopo che la griglia è stata caricata completamente utilizzando ExtJS

Question

Sto utilizzando ExtJS per caricare dati in una griglia e desidero aggiungere alcuni processi aggiuntivi dopo che i dati sono stati inseriti completamente nella griglia.

Il mio contesto è, dopo che i dati sono stati messi sulla griglia, controllerò tutte le righe e contrassegnerò alcune di esse come disabilitate in base a una condizione specificata e inseriremo il suggerimento a riga (spiegate perché è disabilitato). Ho provato a utilizzare 2 eventi: "afterrender" di Grid e "load" dell'archivio della griglia, ma non hanno funzionato.

Perché grid's 'afterrender' è stato generato durante l'inizializzazione della prima griglia, non riguarda il carico di dati. store's 'load' è stato attivato quando i dati erano precaricati per l'archiviazione (non il rendering sullo schermo), quindi non è possibile ottenere la riga <div> per ridimensionarla come disabilitata.

Quindi, qual è l'evento da rilevare quando i dati sono stati caricati e resi completamente sulla griglia? E come posso implementare questo requisito?

Answer 1

Credo che per voi compito non c'è bisogno di aspettare fino a quando viene caricato griglia, ma piuttosto utilizzare viewConfig opzione per il pannello grigliato per configurare come esattamente per visualizzare le righe:

viewConfig: { 
    getRowClass: function(r) { 
     if (r.get('disabled')) 
     return 'disabled-class'; 
     else 
     return ''; 
    } 
} 

Answer 2

Hai provato viewready?

Ext.create('Ext.grid.Panel', { 
    // ... 
    viewConfig: { 
     listeners: { 
      viewready: function(view) { 
       // ... 
      } 
     } 
    } 
}); 

Answer 3

Utilizzare il successo:. Proprietà su GetForm load()() per chiamare una funzione per gestire l'elaborazione di carico posta

Answer 4

Se si utilizza la funzione setTimeout forzerà la chiamata per accadere dopo il rendering è finito, ha funzionato in un caso simile I avuto il tuo

listeners: { 
    'afterrender': function(grid) { 
      setTimeout(function(){ 
      // ... 

Answer 5

Si potrebbe sfruttare evento del negozio load direttamente, o relè l'evento attraverso la griglia.

All'interno della classe griglia, probabilmente nella funzione initComponent, mettere le seguenti,

this.relayEvents(this.getStore(), [ 'load' ]); 

Answer 6

viewready ha lavorato per me !!!

configurato come di seguito nel controllore:

Ext.define('App.controller.Dashboard', { 
    extend: 'Ext.app.Controller', 
    init: function() { 
    this.control({ 
     '#summary-bottom-grid': { 
      viewready: function(cmp){ 
       var link = Ext.DomQuery.selectNode('span.summary-status',cmp.body.dom); 
      } 
      } 
    });  
    } 
} 

Answer 7

Io uso ExtJS 4.2.3 e questo ha funzionato.

ho usato questo:

this.grid = Ext.create('Ext.grid.Panel',{ 
    store: this.ds, 
    margins: '0 0 0 10', // top right button left 
    title: lng.menu.caption.mailHeaderGrid, 
    selType: 'checkboxmodel', 
    columns:[...], 
    selModel: { 
     renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { 
      var baseCSSPrefix = Ext.baseCSSPrefix; 
      metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker'; 
      return (record.get('status') =='lng.label.surveyFinalized') ? '' : '<div class="' + baseCSSPrefix + 'grid-row-checker"> </div>'; 
     }, 
    }, 

Per me funziona su Chrome!

https://www.sencha.com/forum/showthread.php?237641-How-to-hide-certain-checkbox-in-a-CheckboxSelectionModel

Answer 8

Mi rendo conto che questa è una vecchia questione, ma di recente ho dovuto risolvere un problema di scorrimento in un (4.0.2) app vecchio ExtJS e avevo bisogno di un trigger/evento per quando html (ad es <tavolo> tag) è stato effettivamente aggiornato/inserito nella visualizzazione griglia.

Il seguente script aggiunge un nuovo evento di "aggiornamento" a Ext.grid.View. L'evento di aggiornamento viene attivato dopo che html è stato inserito nella vista.

(function(){ 
    var _setNewTemplate = Ext.grid.View.prototype.setNewTemplate; 
    Ext.override(Ext.grid.View, { 
     setNewTemplate: function(){ 

      _setNewTemplate.apply(this, arguments); 

      var view = this; 
      var template = this.tpl; 
      template.overwrite = function(el, values, returnElement){ 
       el = Ext.getDom(el); 
       el.innerHTML = template.applyTemplate(values); 
       view.fireEvent("update", view, el); //<--New Event! 
       return returnElement ? Ext.get(el.firstChild, true) : el.firstChild; 
      }; 

      template.doInsert = function(where, el, values, returnEl) { 
       el = Ext.getDom(el); 
       var newNode = Ext.core.DomHelper.insertHtml(where, el, template.applyTemplate(values)); 
       view.fireEvent("update", view, el); //<--New Event! 
       return returnEl ? Ext.get(newNode, true) : newNode; 
      } 

     } 
    }); 
})(); 

Per utilizzare il nuovo evento, è sufficiente aggiungere un nuovo listener di eventi alla visualizzazione griglia. Esempio:

paymentGrid.view.on("update", function(view, el){ //vs paymentGrid.store.on("load", ... 

    //do something... 
    console.log(el); 

}, this); 

Si noti che questo è stato implementato utilizzando ExtJS 4.0.2. Potrebbe essere necessario aggiornare lo script per la versione di ExtJS.

UPDATE

ho scoperto che il nuovo evento "update" non stava sparando quando la vista è stato il rendering di un negozio vuoto. Come soluzione alternativa, ho esteso il metodo di aggiornamento della vista.

(function(){ 
    var _refresh = Ext.grid.View.prototype.refresh; 
    Ext.override(Ext.grid.View, { 
     refresh: function() { 
      _refresh.apply(this, arguments);     

      var view = this; 
      var el = view.getTargetEl(); 
      var records = view.store.getRange(); 

      if (records.length < 1) {      
       view.fireEvent("update", view, el); //<--New Event! 
      } 
     } 
    }); 
})();