i am having extjs GridPanel

when i load store:

I do Ext.getBody().mask();

Grid 'afterrender' event fires first

Store 'load' event fires second

I attached unmask function to  store load 'event'

but there are few moments after that event, when i see white grid (between unmask and rows populating).

what is the proper way to unmask on real full afterrender event? i mean - when all rows are rendered.

Thanks

i am having extjs GridPanel

when i load store:

I do Ext.getBody().mask();

Grid 'afterrender' event fires first

Store 'load' event fires second

I attached unmask function to  store load 'event'

but there are few moments after that event, when i see white grid (between unmask and rows populating).

what is the proper way to unmask on real full afterrender event? i mean - when all rows are rendered.

Thanks

• javascript
• events
• extjs
• grid

1 Answer 1

I was going to suggest the gridview's loadMask config as covered here in the docs. But I noticed that it wasn't working for me for some reason.

If it doesn't work for you either, just use the gridview's refresh event as covered here. It will only fire after the data is fully loaded into the grid. You can attach it through your gridpanel's viewConfig config like so:

Ext.create('Ext.grid.Panel', {
    title: 'My Grid Panel',
    // ... other grid panel configs
    viewConfig: {
        listeners: {
            refresh: function(gridview) {
                console.log(gridview);
                console.log('is fully loaded');
            }
        }
    },
});

Or if you are using MVC app architecture:

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    models: ['MyModel'],

    stores: ['MyStore'],

    views:  ['MyGridPanel'],

    init: function() {
        var me = this;

        me.control({

            // ... other event handlers

            'mygridpanel > gridview': {

                refresh: function(gridview) {
                    console.log(gridview);
                    console.log('is fully loaded');
                }

            },
        });
    }
});