PDA

View Full Version : [CLOSED] Ext.grid.Panel load mask sizing bug



stevo.zilik
7 Nov 2012, 4:10 PM
Hi,

I'm using 4.1.1

I believe I've found a bug with grid load mask causing page resizing issues.

in following scenario:


create a model and ajax store getting some data from server, set autoLoad to true
define a grid with some columns, set the width to 100%, set the store to the one created
render the grid as renderTo: 'some element on page'

Open the page in maximized browser, wait until the data loads (the loading mask should appear). After the loading mask disappears, try resizing the browser window, you should get a page horizontal scrollbar extending to the area where the loading mask was visible (which is incorrect).

workaround:



Ext.override(Ext.grid.Panel, {
constructor: function (config) {
var viewConfig = config.viewConfig || {};
viewConfig.loadMask = false;
config.viewConfig = viewConfig;
return this.callOverridden([config]);
},
initComponent: function () {
var me = this;
me.callParent();
if (me.store) {
me.store.on('beforeload', function () {
me.setLoading('loading...');
});
me.store.on('load', function () {
me.setLoading(false);
});
}
}
});


Can you reproduce?
Stevo

mitchellsimoens
9 Nov 2012, 10:45 AM
Thanks for the report.

tbonci
16 Sep 2013, 7:11 AM
I wrote an override that seems to fix the issue but should work with any loadmask (not just grid based ones).


Ext.override(Ext.LoadMask, {
getMaskEl: function () {
var me = this,
retObj = me.maskEl || (me.maskEl = me.el.insertSibling({
cls: me.maskCls,
style: {
zIndex: me.el.getStyle('zIndex') - 2
}
}, 'before'));
retObj.setVisibilityMode(2);
return retObj;
}
});