Question

Load mask not working, I set property loadMask: true and I still have the same problem, I cant see loadmask control, this grid was added inside ui layout, also I used loadMask function and I still have the same problem, please advise .

     gridHistory = new Ext.grid.GridPanel({
         id: "gvHistory",
         ddGroup: 'gridDDGroup',
         store: gridStore,
         renderTo: 'HistoryPanel',
         layout: 'fit',
         columns: cols,
         enableDragDrop: true,
         stripeRows: true,
         pageSize: 25,
         header: false,
         loadMask: true,
         autoScroll: true,
         autoExpandColumn: 'Position_ID',
         height: resolveHistoryGridHeight(),
         forceFit: true,
         autoFill: true,
         iconCls: 'icon-grid',
         tbar: [{
             tooltip: 'Reload',
             iconCls: 'reload',
             iconMask: true, 
             handler: function () { getPositionsHistory(); }
         }, '-', {
             tooltip: 'Clear',
             iconCls: 'clear',
             iconMask: true, 
             handler: function () { Clear(); }
         }
         , '-', {
             xtype: 'checkbox',
             name: 'field1',
             boxLabel: 'Draw Track',
             id: 'cb_draw_track',
             handler: function () { if (this.checked) { drawTrack(); } }
         }],
         selModel: new Ext.grid.RowSelectionModel({ singleSelect: false })
     });

Answer 1

The reason the loadMask config is not having any effect is because your grid’s data is defined inline.

var gridStore = new Ext.data.JsonStore({ fields: fields, data: myData, root: 'records'});

By this, I mean that you are not loading your data from the server. The load mask will only show on the grid when it is making a request to the server, and this is why no load mask is being displayed.

You can change your store’s data property to a URL instead, and return a JSON response from the server but I wouldn’t advise this if you can use inline data instead.