Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Vote Rating
    18
    James Goddard will become famous soon enough James Goddard will become famous soon enough

      1  

    Default [4.1 Beta 1] Ext.LoadMask throws exception

    [4.1 Beta 1] Ext.LoadMask throws exception


    REQUIRED INFORMATION
    Ext version tested:
    • Ext 4.1 Beta 1
    Browser versions tested against:
    • Chrome 16.0.912.75
    DOCTYPE tested against:
    • html
    Description:
    • Load throws an exception on show.
    Steps to reproduce the problem:
    • Load enclosed script
    The result that was expected:
    • A full body load mask
    The result that occurs instead:
    • ext-all-debug.js:56978Uncaught TypeError: Object [object Object] has no method 'getContentTarget'
    Test Case:
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title id="page-title">ExtJS 4.1 Bug</title>
            <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
            <script type="text/javascript" src="js/extjs/ext-all-debug.js"></script> 
    
    
            <script type="text/javascript">
                Ext.onReady(function() {
                    var mask = Ext.create ('Ext.LoadMask', Ext.getBody ());
                    mask.show ();
                });
            </script>
        </head>
        <body>
        </body>
    </html>
    HELPFUL INFORMATION
    Debugging already done:
    • none
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Windows 7

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Vote Rating
    836
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    That code is working for me with 4.1.0 beta 1
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Vote Rating
    18
    James Goddard will become famous soon enough James Goddard will become famous soon enough

      0  

    Default


    Six other people have experienced the same problem, though with varying error messages depending on the build:

    http://www.sencha.com/forum/showthre...LoadMask-crash

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    198
    Vote Rating
    2
    rspaeth is on a distinguished road

      0  

    Default


    I was having issues with load mask as well. The first example is suppose to have a load mask display in the center panel after layout (a trick given to me by saki in 4.0).

    run the code below and i get:
    error: Uncaught TypeError: Object [object Object] has no method 'getContentTarget'

    Code:
    Ext.onReady(function(){
        
        var centerPanel = Ext.createWidget('panel', 
        {
            xtype: 'panel',
            layout: 'fit',
            region: 'center',
            bodyPadding: 10,
            html : 'center'
        } );
        
        centerPanel.on( 
            'afterlayout',
            function( panel )
            {
                //desire a load mask in the 'center' panel
                var mask = new Ext.LoadMask( 
                    panel.getEl() 
                    ,{
                        msg: 'my mask'
                    }
                );
                    
                mask.show();
            }
            ,this
            ,{ delay: 200 }
        );
        
        
        
        new Ext.Viewport(
           {
            layout: 'border'
            ,items: [
               {
                   xtype: 'panel',
                   layout: 'fit',
                   region: 'north',
                   height: 100
               },
               {
                   xtype: 'panel',
                   layout: 'fit',
                   region: 'west',
                   width: 100
               },
               centerPanel
            ]
        });
    });
    This second example does work. if i pass in the panel instead of the el, the mask displays without error. i think the api has changed.

    Code:
    Ext.onReady(function(){
        
        var centerPanel = Ext.createWidget('panel', 
        {
            xtype: 'panel',
            layout: 'fit',
            region: 'center',
            bodyPadding: 10,
            html : 'center'
        } );
        
        centerPanel.on( 
            'afterlayout',
            function( panel )
            {
                //desire a load mask in the 'center' panel
                var mask = new Ext.LoadMask( 
                    panel 
                    ,{
                        msg: 'my mask'
                    }
                );
                    
                mask.show();
            }
            ,this
            ,{ delay: 200 }
        );
        
        
        
        new Ext.Viewport(
           {
            layout: 'border'
            ,items: [
               {
                   xtype: 'panel',
                   layout: 'fit',
                   region: 'north',
                   height: 100
               },
               {
                   xtype: 'panel',
                   layout: 'fit',
                   region: 'west',
                   width: 100
               },
               centerPanel
            ]
        });
    });

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    198
    Vote Rating
    2
    rspaeth is on a distinguished road

      0  

    Default


    from the loadMask src code. The constructor use to require el, now it is component.:

    Code:
        /**
         * Creates new LoadMask.
         * @param {Ext.Component} comp The Component you wish to mask. The the mask will be automatically sized 
         * upon Component resize, and the message box will be kept centered.</p>
         * @param {Object} [config] The config object
         */
        constructor : function(comp, config) {
            var me = this;
    
            //<debug>
            if (!comp.isComponent) {
                if (Ext.isDefined(Ext.global.console)) {
                    Ext.global.console.warn('Ext.LoadMask: LoadMask for elements has been deprecated, use Ext.dom.Element.mask & Ext.dom.Element.unmask');
                }
                comp = Ext.get(comp);
                this.isElement = true;
            }
            //</debug>
    
            me.ownerCt = comp;
            //<debug>
            if (!this.isElement) {
            //</debug>
            me.bindComponent(comp);
            //<debug>
            }
            //</debug>
            me.callParent([config]);
    
            if (me.store) {
                me.bindStore(me.store, true);
            }
        },

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Vote Rating
    18
    James Goddard will become famous soon enough James Goddard will become famous soon enough

      0  

    Default


    Attaching screenshots from all 3 major browsers with the exact code I posted and the ExtJS 4.1 Beta 1 from your download page.

    loadMaskBug.jpgloadMaskBug2.jpgloadMaskBug3.jpg

  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    198
    Vote Rating
    2
    rspaeth is on a distinguished road

      0  

    Default


    James, You are correct that there is an error, but the api has changed so we have to implement masks differently. Ext.getBody() returns an Ext.Element. We can no longer send an element into a load mask. see my previous post of the constructor and note the following:

    Ext.LoadMask: LoadMask for elements has been deprecated, use Ext.dom.Element.mask & Ext.dom.Element.unmask'

    try this instead.

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title id="page-title">ExtJS 4.1 Bug</title>
            <link rel="stylesheet" type="text/css" href="/js/ext-4.1.0/resources/css/ext-all.css" />
        <script type="text/javascript" src="/js/ext-4.1.0/ext-all-debug.js"></script>
    
        <!-- Shared -->
        <link rel="stylesheet" type="text/css" href="/js/ext-4.1.0/examples/shared/example.css" />
    
    
            <script type="text/javascript">
                Ext.onReady(function() {
                    Ext.getBody().mask( 'loading' );
                    
                });
            </script>
        </head>
        <body>
        </body>
    </html>

  8. #8
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Vote Rating
    18
    James Goddard will become famous soon enough James Goddard will become famous soon enough

      0  

    Default


    Quote Originally Posted by rspaeth View Post
    James, You are correct that there is an error, but the api has changed so we have to implement masks differently.
    LoadMask is not listed in the API changes document, so this is still a bug. The bug is either that the API changes document needs to be updated to deal with this or the 4.0 API restored.

    http://www.sencha.com/forum/showthre...29-API-Changes

  9. #9
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    378
    Vote Rating
    2
    silcreval is on a distinguished road

      0  

    Default


    I hit this problem with an Ajax type call through a data.Store. It crashes in LoadMask.js

    I dont actually use LoadMask directly.