View Full Version : loadMask is not working though I have the config needed in my grid

5 Aug 2010, 11:06 PM
I ahve created the grid and added to a PagingToolbar. When I click the next or last page, the "loadMask" works so great. The same way if I filter the grid using ComboBox, it shows the nice looking "Loading..." masg.

The only problem is that, it doesn't show up while loading the page for the FIRSTtime.. Please find the code below. I marked the places in GREEN and RED color for better readability. I don't know is there anything I should do with onRender here?

Thanks in advance guys.

// Hypervisor Grid Configuration
Ext.ux.grid.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
var config = {
store:store // configured
,columns:cm //configured
,loadMask: true //Though I configured under initComponent, it doesn't show up while loading the page for the first time.
,autoExpandColumn: 'HypervisorName'
,autoScroll: true
,plugins:[hvFilters, new Ext.ux.grid.Search({
,width: 200

text:'Sort by:'
},new Ext.form.ComboBox({
store: realmStore,
displayField: 'realms',
typeAhead: true,
mode: 'remote',
fieldLabel: 'Realm',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a realm...',
,select:function() {
this.getStore().baseParams = {action: 'fetch', realm: Ext.getCmp('realmHvCombo').getValue()}; // loadMask works fine here
this.getStore().load({params:{start:0, limit:100}});
}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

this.getStore().setDefaultSort('HypervisorName', 'desc');

this.bbar = new Ext.PagingToolbar({ // Works fine here
,plugins: new Ext.ux.ProgressBarPager()
,displayMsg: 'Displaying hypervisors {0} - {1} of {2}'
,emptyMsg: "No hypervisors to display"

// call parent
Ext.ux.grid.Grid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

,onRender:function() {

// call parent
Ext.ux.grid.Grid.superclass.onRender.apply(this, arguments);

// load the store
this.store.load({params:{start:0, limit:100}});

} // eo function onRender

5 Aug 2010, 11:37 PM
Move the store loading to the afterRender or render method, so the mask it shown when the grid has been assigned a size.

6 Aug 2010, 12:17 AM
I tried both but nothing happens.

,afterRender:function() {
// load the store
this.store.load({params:{start:0, limit:100}});

,render:function() {
// load the store
this.store.load({params:{start:0, limit:100}});


6 Aug 2010, 12:26 AM
Cool. I added like below.

,afterRender: function() {
Ext.ux.grid.Grid.superclass.afterRender.apply(this, arguments);
this.store.load({params:{start:0, limit:100}});

It shows now. But first time at the top of the page the "Loading..." message is shown and after that, it's aligned to center. Any idea to overcome?

6 Aug 2010, 12:28 AM
The only way to do that would be to load the store in the afterlayout event of the gridpanel container.

(the grid would need to be it's final size before you start loading)

6 Aug 2010, 12:37 AM
oooppppps. It works great. But the performance is very slow with this. It takes long time to load the grid this way when compared to afterRender.

6 Aug 2010, 12:45 AM
Did you add {single:true} to the afterlayout event handler? (otherwise it will fire multiple times!)

6 Aug 2010, 1:02 AM
It works but bit latency is there. Going forward if the rows increase, there might be a problem.. But I am keeping it like this now. Thanks for your help.

6 Aug 2010, 5:26 AM
Would not be easier just to add autoLoad:true to store configuration, to automatically load data?
Start and limit default parameters can also be part of store config...

6 Aug 2010, 5:29 AM
Then you wouldn't get a loadMask at all, because in the beforeload event the grid isn't rendered yet.

6 Aug 2010, 5:51 AM
I have a component with such a configuration and loadMask shows up just fine :)

Ext.o3mod.LiveConcert = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
this.liveViewFields = [
{ name: 'tendid'},

this.directStore = new Ext.data.DirectStore({
api: { read: ConcertDirect.readData},
autoLoad : true,
baseParams: {start :0,limit : 10, sort :'id', dir :'ASC',tips :'7', filtri:'',dienas:'',valsts:''},
paramOrder: ['sort','dir','start','limit','tips','filtri','dienas','valsts'],
remoteSort: true,
fields: this.liveViewFields,
listeners : {
loadexception : function()
{ alert('Data LOAD EXCEPTION! Information unavailable!');}

this.colModel = new Ext.grid.ColumnModel({
columns: [
{width:80, fixed:true, dataIndex: 'tendId',renderer:this.rendererKarogs},

var config = Ext.apply(this.initialConfig, {
viewConfig: {
emptyText:'Reply from database is empty (There are no records or nothing found in search)!'
Ext.apply(this, config);
Ext.o3mod.LiveConcert.superclass.initComponent.apply(this, arguments);

9 Aug 2010, 12:36 AM
Stju, I tried it and it works fine. Thanks you and Condor.

9 Aug 2010, 1:21 AM
But the same way, the loadMask is NOT working at all for property grid.

9 Aug 2010, 1:57 AM
PropertyGrid doesn't load its data using the store proxy, so it will not use the loadMask.

If you would configure a PropertyGrid to use a store proxy (does require some extra 'hackish' coding) then it would show the loadMask.

9 Aug 2010, 8:28 AM
I use a store proxy while loading the property grid and storing the data using load listener. After that I am doing the setSource(). Can you tell me how to avoid this if there is any easy way and I can enable loadMask? Thanks for your help.