Results 1 to 7 of 7

Thread: Question and/or bug about setLoading

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    9
    Answers
    2
    Vote Rating
    0
      0  

    Default Answered: Question and/or bug about setLoading

    I've got two questions about the function 'setLoading' in AbstractComponent.

    As you can see in the attachments, the loadingMask is on the complete form, without thinking of the z-order of the top bar and the tab-panel with it's content. I assume there is some setting to make sure that the loadingMask isn't going over something else, but I can't find it. Can anyone help me?

    The question is about a Chrome related problem: the text on the mask is splitted in two lines, but I don't want this, nor did I say it should be splitted. Because of the splitting, there is also a empty piece of 'light blue' on the right hand side of the text. Is this fixable? A 'hack' is good enough.

    Thanks in advance!
    Attached Images Attached Images

  2. Good to see there are other people trying to investigate this

    Meanwhile, this works fairly well (on ExtJS 4.0):
    Code:
    Ext.override(Ext.AbstractComponent, {
        setLoading: function(load, targetEl)
        {
            var me = this,
                msg;
    
            if (me.rendered)
            {
                if (load !== false && !me.collapsed)
                {
                    if (Ext.isObject(load))
                    {
                        throw "This implementation of setLoading does not support a config object.";
                    }
                    else if (Ext.isString(load))
                    {
                        msg = load;
                    }
                    else
                    {
                        msg = "Loading...";
                    }
                    if (me.loadMask)
                    {
                        me.loadMask.unmask();
                    }
                    me.loadMask = me.loadMask || (targetEl ? me.getTargetEl() : me.el);
                    me.loadMask.mask(msg);
                }
                else if (me.loadMask)
                {
                    me.loadMask.unmask();
                    me.loadMask = null;
                }
            }
        }
    });
    After overriding the setLoading function, you don't have to alter your code in any way, as long as you do not use configuration objects for LoadMasks (as those are not involved in this solution).
    LoadMasks are floating components and therefore float above all static components. This implementation just sets a mask on the component itself.

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    This look awful anyway. LoadMask has gotten many bug fixes and optimizations in the 4.1.0 beta 1 release.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    9
    Answers
    2
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    This look awful anyway. LoadMask has gotten many bug fixes and optimizations in the 4.1.0 beta 1 release.
    Unfortunately that doesn't solve it. Do you have any other ideas?

  5. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    9
    Answers
    2
    Vote Rating
    0
      0  

    Default

    As we're going to release this within 3 weeks and I couldn't find any forum rules not permitting it, I'd like to bump this thread once to be sure there's no known solution.

  6. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Good to see there are other people trying to investigate this

    Meanwhile, this works fairly well (on ExtJS 4.0):
    Code:
    Ext.override(Ext.AbstractComponent, {
        setLoading: function(load, targetEl)
        {
            var me = this,
                msg;
    
            if (me.rendered)
            {
                if (load !== false && !me.collapsed)
                {
                    if (Ext.isObject(load))
                    {
                        throw "This implementation of setLoading does not support a config object.";
                    }
                    else if (Ext.isString(load))
                    {
                        msg = load;
                    }
                    else
                    {
                        msg = "Loading...";
                    }
                    if (me.loadMask)
                    {
                        me.loadMask.unmask();
                    }
                    me.loadMask = me.loadMask || (targetEl ? me.getTargetEl() : me.el);
                    me.loadMask.mask(msg);
                }
                else if (me.loadMask)
                {
                    me.loadMask.unmask();
                    me.loadMask = null;
                }
            }
        }
    });
    After overriding the setLoading function, you don't have to alter your code in any way, as long as you do not use configuration objects for LoadMasks (as those are not involved in this solution).
    LoadMasks are floating components and therefore float above all static components. This implementation just sets a mask on the component itself.

  7. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Answers
    1
    Vote Rating
    0
      0  

    Default

    If you really do not want the lines to break in Chrome, you could try replacing any space characters with " " in the msg variable just before me.loadMask.mask(msg).

  8. #7
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Another, more elegant fix for this problem is the following. Instead of rewriting the caller code, let's now rewrite the callee: LoadMask is the culprit, not AbstractComponent. This should also work for LoadMasks coupled to stores etc.

    Code:
    Ext.define('Ext.LoadMask',
    {
        extend: 'Ext.util.Observable',
        
        constructor: function(el, config) {
            var me = this;
            
            this.addEvents(
                'beforehide',
                'hide',
                'beforeshow',
                'show',
                'beforedestroy',
                'destroy'
            );
            
            if (el.isComponent)
            {
                me.maskElement = el.getEl();
            }
            else
            {
                me.maskElement = el;
            }
            this.superclass.constructor.apply(this, [config]);
            
            if (me.store)
            {
                me.bindStore(me.store, true);
            }
        },
    
        bindStore : function(store, initial)
        {
            var me = this;
    
            if (!initial && me.store)
            {
                me.mun(me.store, {
                    scope: me,
                    beforeload: me.show,
                    load: me.hide,
                    exception: me.hide
                });
                if (!store)
                {
                    me.store = null;
                }
            }
            if (store)
            {
                store = Ext.data.StoreManager.lookup(store);
                me.mon(store, {
                    scope: me,
                    beforeload: me.show,
                    load: me.hide,
                    exception: me.hide
                });
            }
            me.store = store;
            if (store && store.isLoading())
            {
                me.show();
            }
        },
        
        enable: function()
        {
            this.show();
        },
        
        disable: function()
        {
            this.hide();
        },
    
        show: function()
        {
            this.fireEvent('beforeshow', this);
            this.maskElement.mask(this.msg || 'Loading...');
            this.fireEvent('show', this);
        },
    
        hide: function()
        {
            this.fireEvent('beforehide', this);
            this.maskElement.unmask();
            this.fireEvent('hide', this);
        },
        
        destroy: function()
        {
            this.fireEvent('beforedestroy', this);
            this.hide();
            this.fireEvent('destroy', this);
        }
    });
    This code simulates the (most important) behaviour of LoadMask, thereby replacing LoadMask entirely.

Posting Permissions

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