Results 1 to 3 of 3

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

Hybrid View

Previous Post Previous Post   Next Post Next Post
    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
  •