PDA

View Full Version : Loading mask does not stay centered when the window is resized



tomb@ibcos.co.uk
21 Jul 2011, 2:59 AM
REQUIRED INFORMATION


Ext version tested:

Ext 4.0.2a


Description:

The loading mask for a panel does not resize


Steps to reproduce the problem:

Create a panel
Call the panels setLoading(true) method
Resize the panel


The result that was expected:

The loading text and spinner should stay centered


The result that occurs instead:

The loading text and spinner does not move


Test Case:



panel = Ext.create('Ext.panel.Panel', {
html: 'Stuff'
});

win = Ext.create('Ext.window.Window', {
title: 'Resize Me',
width: 300,
height: 300,
layout: 'fit',
items: [panel]
});

win.show();
panel.setLoading(true);




HELPFUL INFORMATION

Debugging already done:

The abstract component's setLoading method creates a mask with the components el, not the component itself. If a component is passed to the LoadMask constructor, the load mask will bind to the components resize events.


Possible fix:

Highlighted in Green


Ext.override(Ext.AbstractComponent, {

setLoading : function(load, targetEl) {
var me = this,
config;

if (me.rendered) {
if (load !== false && !me.collapsed) {
if (Ext.isObject(load)) {
config = load;
}
else if (Ext.isString(load)) {
config = {msg: load};
}
else {
config = {};
}
me.loadMask = me.loadMask || Ext.create('Ext.LoadMask', targetEl ? me.getTargetEl() : me, config);
//me.loadMask = me.loadMask || Ext.create('Ext.LoadMask', targetEl ? me.getTargetEl() : me.el, config);
me.loadMask.show();
} else if (me.loadMask) {
Ext.destroy(me.loadMask);
me.loadMask = null;
}
}

return me.loadMask;
}

});

plleeuwm
12 Sep 2013, 11:41 AM
This still doesn't work in 4.2.1.

lfs2008
3 Sep 2014, 3:26 AM
this is what i have for my viewport.
please let me know if there is better solution



listeners: {
'resize': function (me) {
var Size = Ext.getBody().getSize();
Ext.Array.each(Ext.query(".x-mask"), function(el){
Ext.get(el).setStyle("width" , Size.width + "px")
.setStyle("height" , Size.height + "px")
.setStyle("left" , 0)
.setStyle("top" , 0);
})
}