Hybrid View

    You found a bug! We've classified it as EXTJS-3976 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    253
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default 4.0.6: LoadMask ignors target-element

    4.0.6: LoadMask ignors target-element


    REQUIRED INFORMATION


    Ext version tested:
    • Bug occurs in 4.0.5 and 4.0.6
    • Works in 4.0.2a


    Browser versions tested against:
    • FF6.0.1
    • Chrome 13


    Description:
    • LoadMask ignors a given target-element


    Steps to reproduce the problem:
    • Create a LoadMask on a grid with a target other then the grid


    The result that was expected:
    • The loading-mask should cover the whole browser-window.


    The result that occurs instead:
    • The loading-mask covers only the grid.


    Test Case:

    Code:
    Ext.define('Ext.ux.MyGrid',
    {    extend: 'Ext.grid.Panel',
        
        constructor: function(config)
        {   Ext.applyIf(config.viewConfig,
            {    loadMask: new Ext.LoadMask(Ext.getBody(), 
                {    msg: "My Loading text..."
                })
            });
            this.callParent(arguments);
        }
    });

  2. #2
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    @ontho --

    Regression*

    AbstractViews do not currently support a unique instance of a LoadMask. Only a configuration object. Thus, you cannot target another Element or Component at this time without this override or equivalent:
    Code:
    Ext.override (Ext.view.AbstractView , {
        
          onRender: function() {
              var me = this,
                 mask = me.loadMask,
                 cfg = {                 
                     msg: me.loadingText,
                     msgCls: me.loadingCls,
                     useMsg: me.loadingUseMsg
                 };
              me.callParent(arguments);
              if (mask) {             // either a config object
                 if (Ext.isObject(mask)) {
                     cfg = Ext.apply(cfg, mask);
                 }
                 // Attach the LoadMask to a *Component* so that it can be sensitive to resizing during long loads.
                 // If this DataView is floating, then mask this DataView.
                 // Otherwise, mask its owning Container (or this, if there *is* no owning Container).
                 // LoadMask captures the element upon render.
                 me.loadMask = Ext.isFunction(mask.isDescendantOf) ? mask : Ext.create('Ext.LoadMask', me, cfg);
                 me.loadMask.on({
                     scope: me,
                     beforeshow: me.onMaskBeforeShow,
                     hide: me.onMaskHide
                 });
             }
         }
    })
    Additional overrides may be necessary for grid.Panel.reconfigure as well.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    253
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default


    Thanks for your reply, your workaround works to disable the whole body, so thanks a lot.

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2011
    Posts
    17
    Vote Rating
    0
    oilid is on a distinguished road

      0  

    Default


    Is there also a working workaround for ExtJS 4.1?

    Thanks!

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2011
    Posts
    17
    Vote Rating
    0
    oilid is on a distinguished road

      0  

    Default


    Bump...

  6. #6
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    253
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default


    Actually, I do the loadMask myself in 4.1, like:
    Code:
    constructor: function(config)
    { this.myLoadMask = new Ext.LoadMask(Ext.getBody(), 
            {    msg: "Loading..."
            }) 
    
    config.store.listeners =
                {    beforeload:
                    {    fn: function (me, operation, eOpts)
                        {  this.myLoadMask.show();
                             return true;                        
                        }
                    },
                    load: 
                    {    fn: function (me, records, success, operation, eOpts)
                        {    this.myLoadMask.hide();
                         }     
                    }
                }
    
       this.callParent(arguments);
    },

Thread Participants: 2