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:

Code:
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

Code:
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;
    }

});