Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    Nov 2009
    Posts
    92
    Vote Rating
    3
    tomb@ibcos.co.uk is on a distinguished road

      0  

    Default Loading mask does not stay centered when the window is resized

    Loading mask does not stay centered when the window is resized


    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;
        }
    
    });

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    98
    Vote Rating
    5
    plleeuwm is on a distinguished road

      0  

    Default


    This still doesn't work in 4.2.1.
    Check out my small framework https://github.com/pllee/luc . I would love to get some feedback on it let me know what you think about it in a pm.

  3. #3
    Sencha User lfs2008's Avatar
    Join Date
    Oct 2010
    Location
    Russia
    Posts
    62
    Vote Rating
    6
    lfs2008 is on a distinguished road

      0  

    Default


    this is what i have for my viewport.
    please let me know if there is better solution

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

Thread Participants: 2