Results 1 to 3 of 3

Thread: Loading mask does not stay centered when the window is resized

    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
      0  

    Default 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
    100
    Vote Rating
    5
      0  

    Default

    This still doesn't work in 4.2.1.

  3. #3
    Sencha User lfs2008's Avatar
    Join Date
    Oct 2010
    Location
    Russia
    Posts
    66
    Vote Rating
    6
      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);
                })
            }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •