Processo dopo la griglia è stata caricata completamente, utilizzando ExtJS

Sto usando ExtJS a caricare i dati di una griglia, e vorrei aggiungere alcune ulteriori processi dopo che i dati è stato messo sulla griglia completamente.

Mio contesto è, dopo che i dati è stato messo sulla griglia, io controllo tutte le righe, e mark alcuni di loro, come disabili basato su una condizione specificata e mettere in descrizione per riga (spiegare perché è disattivato). Ho provato ad usare 2 eventi: ‘afterrender’ di Griglia, e ‘carico’ di griglia del negozio, ma non ha funzionato.

Perché grid's 'afterrender' stato licenziato quando prima griglia di inizializzazione non è la preoccupazione per i dati di carico. store's 'load' stato licenziato quando dati prefetch per memorizzare (non il rendering sullo schermo), quindi non posso ottenere la riga <div> stile come disabili.

Così, che cosa è il caso di rilevare se i dati è stato caricato e reso completamente su una griglia? E come posso implementare questo requisito?

  • Che versione di ExtJs stai usando? Penso che si sta tentando di risolvere il problema da un’angolazione sbagliata.
  • Sto usando ExtJS 4.0.1, grazie.
InformationsquelleAutor | 2012-06-27



8 Replies
  1. 2

    Penso che per il compito non è necessario attendere fino a quando la griglia è caricato, ma piuttosto utilizzare viewConfig opzione per il pannello della griglia per configurare esattamente come visualizzare il vostro righe:

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

    Hai provato viewready?

    Ext.create('Ext.grid.Panel', {
        //...
        viewConfig: {
            listeners: {
                viewready: function(view) {
                    //...
                }
            }
        }
    });
    • In ExtJS 4.0.7, questo evento sembra fuoco prima che il negozio è caricato, non dopo.
    • Utilizzando ExtJS 5.1 qui, sembra che per fare il lavoro. Secondo l’API descrizione: viene generato quando la Vista gli elementi che rappresentano gli elementi dell’Archivio è stato sottoposto a rendering. Articoli non saranno disponibili per la selezione fino a quando questo viene generato un evento. Così è la mia comprensione di ciò che dovrebbe accadere dopo il negozio è carico, e corrisponde a quello che vedo sullo schermo.
  3. 5

    Si possa attingere il negozio load evento direttamente, o a relè l’evento attraverso la griglia.

    All’interno della griglia di classe, probabilmente in initComponent funzione, inserire il seguente,

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

    Se si utilizza il setTimeout funzione forzerà la chiamata a succedere dopo il rendering ha finito, ha funzionato in un caso simile ho avuto il tuo.

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

    Mi rendo conto che questa è una vecchia questione, ma di recente ho dovuto correggere un problema di scorrimento in un vecchio ExtJS (4.0.2) app e ho bisogno di un trigger/evento per quando html (ad esempio <table> tag) è stato aggiornato/inserito nella vista a griglia.

    Il seguente script aggiunge un nuovo “aggiornamento”, un evento per Ext.griglia.Vista. L’evento di aggiornamento è sparato dopo aver 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 per la griglia. Esempio:

    paymentGrid.view.on("update", function(view, el){ //vs paymentGrid.store.on("load", ...
    
        //do something...
        console.log(el);
    
    }, this);

    Di notare che questo è stato realizzato utilizzando ExtJS 4.0.2. Potrebbe essere necessario aggiornare lo script per la versione di ExtJS.

    AGGIORNAMENTO

    Ho trovato che il nuovo “aggiornamento” evento non era cottura quando un rendering di un archivio vuoto. Come soluzione alternativa, ho esteso la vista del metodo di aggiornamento.

    (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!
                }
            }
        });
    })();
  6. 0

    Uso il successo: proprietà getForm().load() per chiamare una funzione per gestire il post carico di elaborazione

  7. 0

    viewready ha lavorato per me !!!

    Configurato come di seguito controller :

    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);
                }
              }
         });    
      }
    }
  8. 0

    Io uso extjs 4.2.3 e questo ha funzionato.

    Io 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

Lascia un commento