Question

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?

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