Process after grid was loaded completely using ExtJS

问题

I am using ExtJS to load data to a grid, and I want to add some additional processes after data was put on grid completely.

My context is, after data was put on grid, I will check all rows, and mark some of them as disabled based on a specified condition and put tooltip to row (explain why it is disabled). I tried to use 2 events: 'afterrender' of Grid, and 'load' of grid's store, but they did not work.

Because grid's 'afterrender' was fired when first grid initialization, not concern to data load. store's 'load' was fired when data was prefetch to store (not render on screen), so I cannot get the row <div> to style it as disabled.

So, what is the event to detect when data was loaded and rendered completely on grid? And how can I implement this requirement?

回答1:

I think for you task you don't need to wait until grid is loaded but rather use viewConfig option for the grid panel to configure how exactly to display your rows:

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

回答2:

Have you tried viewready?

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

回答3:

You could tap into the store's load event directly, or relay the event through the grid.

Inside the grid class, probably in the initComponent function, put the following,

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

回答4:

If you use the setTimeout function it will force the call to happen after the rendering has finished, it worked in a similar case I had to yours.

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

回答5:

I realize this is an old question but I recently had to fix a scrolling issue in an old ExtJS (4.0.2) app and I needed a trigger/event for when html (e.g. <table> tag) was actually updated/inserted in the grid view.

The following script adds new "update" event to Ext.grid.View. The update event is fired after html has been inserted into the view.

(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;
            }

        }
    });
})();

To use the new event, you simply add a new event listener to the grid view. Example:

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

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

}, this);

Note that this was implemented using ExtJS 4.0.2. You may need to update the script for your version of ExtJS.

UPDATE

I found that the new "update" event was not firing when a view was rendering an empty store. As a workaround, I extended the view's refresh method.

(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:

Use the success: property on getForm().load() to call a function to handle post load processing

回答7:

viewready worked for me !!!

Configured as below in 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:

I use extjs 4.2.3 and this worked.

I used this:

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>';
         },
     },

For me works on chrome!

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

来源：https://stackoverflow.com/questions/11222295/process-after-grid-was-loaded-completely-using-extjs