PDA

View Full Version : loadMask for GridPanel



nak1
11 May 2010, 7:52 AM
I'm having issue when the Ext.grid.GridPanel is not loading the initial time the store loads. After the Ext.grid.GridPanel is loaded then I reload the grid's store, then the load mask works properly.

franklt69
11 May 2010, 8:16 AM
which version are you using, because I am using 3.1.2 and I have the same behavior

regards
Frank

aconran
11 May 2010, 8:22 AM
Did you invoke the load prior to creating your grid?

nak1
11 May 2010, 8:23 AM
which version are you using, because I am using 3.1.2 and I have the same behavior

regards
Frank

Currently we're using 3.0. Have you attempted to resolve the issue by manipulating the code base?

nak1
11 May 2010, 8:25 AM
Did you invoke the load prior to creating your grid?

No, I simply used the loadMask attribute set to 'true' for the initialization of the Ext.grid.GridPanel. Do I need to initiate the Ext.LoadMask object? In the documentation for this attribute (in the Ext.grid.GridPanel for the loadMask) is simply states "An Ext.LoadMask config or true to mask the grid while loading. Defaults to false."

aconran
11 May 2010, 8:36 AM
If you invoked the load prior to creating the grid this could cause an issue. As the grid would never get the beforeload event that it needs in order to show the LoadMask.

nak1
11 May 2010, 8:49 AM
If you invoked the load prior to creating the grid this could cause an issue. As the grid would never get the beforeload event that it needs in order to show the LoadMask.

That solved the issue, what I had done was call the grid's store to load in the onRender method. I just placed that in an "on" event to execute 'afterrender'

franklt69
11 May 2010, 10:20 AM
nak1 could you give more detail with the code please because I don't understand


regards
Frank

franklt69
11 May 2010, 10:25 AM
I had it:




Ext.ux.BCFileList = Ext.extend(Ext.grid.GridPanel, {
title: 'Batch Files Review',
pageSize: 50,
loadMask: true,
viewConfig: {
autoFill: true
},
stripeRows: true,
..

afterRender: function() {
this.getStore().load({
params: {
start: 0,
limit: this.pageSize
}
});

Ext.ux.BCFileList.superclass.afterRender.apply(this, arguments);
},


and the mask the first time do't appear

regards
Frank

nak1
11 May 2010, 10:27 AM
nak1 could you give more detail with the code please because I don't understand


regards
Frank
Sure, if you look at the code below, I have it written correctly. This is calling the grid's store load function after the grid is finished rendering. Before I was just calling it outside of the listener within the onRender function. Now it is in a listener, so that the grid object has time to fully render.



onRender:function(ct, position) {

this.on('afterrender',function(){
this.getStore().load();
})
grid_base.superclass.onRender.call(this, ct, position);
},

nak1
11 May 2010, 10:29 AM
Wrap your code within a listener like I have and that should be fine.

franklt69
11 May 2010, 10:45 AM
nak1 using you approach work, I mean the mask appear but, now appear in the center of grid, appear on top, do you have the same behavior?



onRender:function(ct, position) {

this.on('afterrender',function(){
this.getStore().load({
params: {
start: 0,
limit: this.pageSize
}
});

})
Ext.ux.BCFileList.superclass.onRender.call(this, ct, position);

},



regards
Frank

nak1
11 May 2010, 10:47 AM
Mine appears on the center. I've noticed if there are a lot of Ajax calls occurring simultaneously, this tends to occur, where it's on the top and doesn't center. Are you running a lot of ajax calls concurrently?

franklt69
11 May 2010, 10:57 AM
In my case nak1 was the gird is inside layout: 'fit' but I don't set height, now I added height:700, and appear in the center

thanks for u help

regards
Frank

hendricd
11 May 2010, 2:04 PM
@frank --

Use a recent Ext version's viewready event instead to trigger loading your store.