PDA

View Full Version : [FIXED] Initial LoadMask on GridPanel not shown



burnnat
7 Nov 2011, 2:20 PM
REQUIRED INFORMATION


Ext version tested:

Ext 4.0.7
4.1.0 PR1


Browser versions tested against:

FF 7.0.1 (firebug 1.8.4)
IE 8
Chrome 13


Description:

I have a grid that automatically loads its store during the onRender phase. However, no load mask is shown while the proxy is waiting, although any subsequent load() calls do show a mask.


Steps to reproduce the problem:

Set up a grid with a store whose proxy takes a while to return data. (I first encountered this using an AJAX proxy, though my test case uses a custom memory proxy with a delay for ease of testing.)
Call store.load() from the grid's onRender() method.


The result that was expected:

A loading mask should be present over the grid until the proxy read operation completes.


The result that occurs instead:

No loading mask is shown.


Test Case:



/**
* Similar to Ext.data.proxy.Memory, but delays callback for three seconds.
*/
Ext.define('DelayedProxy', {
extend: 'Ext.data.proxy.Client',

data: {
items: [
{ name: 'Apple', color: 'Red', tastiness: 2 },
{ name: 'Banana', color: 'Yellow', tastiness: 4 },
{ name: 'Orange', color: 'Orange', tastiness: 1 },
{ name: 'Pear', color: 'Awesome', tastiness: 10 }
]
},

constructor: function(config) {
this.callParent([config]);
this.setReader(this.reader);
},

read: function(operation, callback, scope) {
var reader = this.getReader();
var result = reader.read(this.data);

Ext.apply(operation, {
resultSet: result
});

operation.setCompleted();
operation.setSuccessful();

Ext.callback(callback, scope || this, [operation], 3000);
},

clear: Ext.emptyFn
});

/**
* A grid that auto-loads its store on render.
*/
Ext.define('AnxiousGrid', {
extend: 'Ext.grid.Panel',

onRender: function() {
this.callParent(arguments);
this.getStore().load();
}
});

Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'color', 'tastiness'],
proxy: Ext.create('DelayedProxy', {
reader: {
type: 'json',
root: 'items'
}
})
});

Ext.create('AnxiousGrid', {
store: store,
columns: [
{ header: 'Fruit', dataIndex: 'name' },
{ header: 'Color', dataIndex: 'color' },
{ header: 'Tastiness Factor', dataIndex: 'tastiness' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
});




HELPFUL INFORMATION


Debugging already done:

The issue seems to be in Ext.LoadMask.onBeforeLoad() - on line 212, in the "afterComponentLayout" callback, the load mask is only shown if me.loading is true, but that loading flag is never actually set.


Additional CSS used:

only default ext-all.css


Operating System:

Win7 x64

mitchellsimoens
8 Nov 2011, 7:23 AM
Thank you for the report!

mitchellsimoens
25 Nov 2011, 11:30 AM
This will make it into the next release!

mark0978
26 Feb 2012, 10:06 PM
Any idea of a work around until 4.1 is ready for production? Some way to make it show up? Here is how I load it.



afterrender: function(me, eOpts) {
me.getStore().load();
}


I did come up with a work around but it isn't as pretty as I'd like:



afterrender: function(me, eOpts) {
me.getStore().load({
params: {date: "fake"} // Workaround until 4.1 is available, make loadmask show up while loading
, scope: me.getStore()
, callback: function() {
this.load();
}
});


if date == 'fake' the server returns an empty result set, and I do the real load on attempt #2 which displays the LoadMask.

kevin8622
29 Mar 2012, 1:52 AM
My workaround :

initComponent : function() {
this.store = Ext.create('OffersManagement.stores.OffresStore');
this.columns = this.buildColumns();
this.listeners = {
'afterrender': function()
{
if(typeof this.store.totalCount == typeof undefined && this.store.loading == false)
{
this.store.myMask = new Ext.LoadMask(this.up('panel'), {msg:"Chargement en cours..."});
this.store.myMask.show();

this.store.load({
callback: function()
{
this.myMask.hide();
}
});
}
}
};


this.callParent();
this.on('beforeselect', this.OnBeforeSelect);
}

This will show the loadmask.