Process after grid was loaded completely using ExtJS

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?

What version of ExtJs are you using? I think you're trying to solve your problem from a wrong angle. — sha, Jun 27 '12 at 10:51

score 9 · Answer 1 · answered Jun 27 '12 at 09:21

9

Have you tried viewready?

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

answered Jun 27 '12 at 09:21

Vasiliy Faronov

11,840
2
38
49

2

In ExtJS 4.0.7, this event appears to fire before the store is loaded, not after. – agxs Jun 27 '12 at 09:28
Using ExtJS 5.1 here, it seems to do the job. According to the API description: *Fires when the View's item elements representing Store items has been rendered. No items will be available for selection until this event fires.* So it is my understanding this should happen after the store is load, and matches what I can see on the screen. – Manu Jul 21 '15 at 08:49

score 5 · Answer 2 · answered Dec 17 '12 at 20:58

5

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' ]);

answered Dec 17 '12 at 20:58

James McMahon

48,506
64
207
283

score 3 · Accepted Answer · answered Jun 27 '12 at 18:44

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

score 2 · Answer 4 · edited Oct 06 '12 at 15:38

2

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(){
          // ...

edited Oct 06 '12 at 15:38

jeremy

9,965
4
39
59

answered Aug 08 '12 at 11:45

shluvme

713
7
24

Peter · Answer 5 · 2015-12-12T13:09:47.557

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

score 0 · Answer 6 · answered Jun 27 '12 at 09:28

0

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

answered Jun 27 '12 at 09:28

gunnx

1,229
7
16

score 0 · Answer 7 · edited Dec 20 '12 at 06:47

0

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

edited Dec 20 '12 at 06:47

akjoshi

15,374
13
103
121

answered Dec 20 '12 at 06:23

Srikanth

471
2
14

score 0 · Answer 8 · edited Jun 10 '15 at 22:10

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

Process after grid was loaded completely using ExtJS

8 Answers8

Linked