ExtJs 5: Loading Mask in GridView

Question

In my ExtJs 5 application is a floating window, with a Grid within. The Gird has a hidden column, where i display an user-image. To avoid useless traffic, the images are only fetch by an additional store, when the user set the column visible. The code to Load the images is in the "beforerender" Event and when the loading is complete, the grid will be refreshed.

Because the loading can take a few seconds, i want to use the Mask to overlay the component. But wen i want to add the mask, the following error occure:

Uncaught TypeError: Cannot set property 'component' of null Renderable.js?_dc=1414507483010:938

I think the problem is cause by the event or the anonymous function.

listeners: {
    beforerender: function (column, metaData) {
        var store = Ext.getStore('MemberImagesStore');

        var grid = this.up('grid');
        var view = grid.getView();
        view.setMasked(true);
        store.loadMemberImages({
            scope: grid,
            callback: function (records, operation, success) {
                if (!success) {
                    return;
                }

                var view = this.getView();
                view.refresh();
            }
        });
    }
}

I already tried different function parameter on different Components. But nothing worked for me. Anyone can show me an workaround to solve the problem?

Saki Saki · Accepted Answer · 2014-10-29T13:36:49

1

votes

Try to call grid.mask('Loading...') and, of course, grid.unmask(), when done.

ExtJs 5: Loading Mask in GridView

1 Answers