Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-7358 in a recent build.
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    1
    Vote Rating
    0
    XaaK is on a distinguished road

      0  

    Default JavaScript error when grid toolbars switched (IE error only)

    JavaScript error when grid toolbars switched (IE error only)


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1.0
    Browser versions tested against:
    • Chrome
    • IE8
    Description:
    • Under IE, it is not possible to switch grid toolbars. The code fails with "Error: 'parentNode.className' is null or not an object."
    • This works under Chrome.
    • Using the debug javascript I traced the error to the Ext.layout.Layout.isValidParent function and have a fix detailed below.
    Test Case:
    This sample application illustrates the issue:
    Code:
        <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="/apps/autoTools/common/extjs/resources/css/ext-all.css" />
        <script type="text/javascript" src="/apps/autoTools/common/extjs/ext-all-debug.js"></script>
        <script type="text/javascript" >
        
            var grid;
            
            var menu = Ext.create('Ext.menu.Menu', {
                id: 'modeMenu',
                items: [
                        {
                            text: 'Account Mode',
                            id: 'chkAccountMode',
                            checked: true,       
                            checkHandler: function(item, checked){
                                if(checked) {
                                    grid.removeDocked(Ext.getCmp('accountSearchToolbar'),false);
                                    grid.addDocked(selectBar,0);
                                }
                            },
                            group:'mode'
                        },
                        {
                            text: 'Search Mode',
                            id: 'chkSearchMode',
                            checked: false,       
                            checkHandler: function(item, checked){
                                if(checked) {
                                    grid.removeDocked(Ext.getCmp('accountSelectToolbar'),false);
                                    grid.addDocked(searchBar,0);
                                }
                            },
                            group:'mode'
                        }
                       ]
                });
                
            // create a toolbar
            var selectBar = Ext.create('Ext.toolbar.Toolbar', {
                id: 'accountSelectToolbar',
                items: [
                    {
                        text:'Account Mode',
                        menu: menu  
                    }
                ]
            });
            
            //create second toolbar
            var searchBar = Ext.create('Ext.toolbar.Toolbar', {
                id: 'accountSearchToolbar',
                items: [
                    {
                        text:'Search Mode',
                        menu: menu  
                    }
                ]
            });
    
    
            Ext.application({
                name: 'HelloExt',
                launch: function() {
                    
                    // create the Grid
                    grid = Ext.create('Ext.grid.Panel', {
                        id : 'pMainGrid',
                        tbar : selectBar,
                        layout: 'fit',
                        columns: [
                                {
                                    text     : 'Account',
                                    width    : 120,
                                    sortable : true,
                                    hideable : false,
                                    resizable: false,
                                    dataIndex: 'account'
                                }
                            ],
                        renderTo: Ext.getBody()
                    });
                }
            });
            
        </script>
    </head>
    <body>
    </body>
    </html>
    HELPFUL INFORMATION

    Possible fix:
    Updating the isValidParent method to test if itemDom.parentNode.className is non-null will fix this issue:
    Code:
    isValidParent : function(item, target, position) {
            var itemDom = item.el ? item.el.dom : Ext.getDom(item),
                targetDom = (target && target.dom) || target;
    
    
            
            if (itemDom.parentNode && itemDom.parentNode.className && itemDom.parentNode.className.indexOf(Ext.baseCSSPrefix + 'resizable-wrap') !== -1) {
                itemDom = itemDom.parentNode;
            }
    
    
            
            if (itemDom && targetDom) {
                if (typeof position == 'number') {
                    return itemDom === targetDom.childNodes[position];
                }
                return itemDom.parentNode === targetDom;
            }
    
    
            return false;
        },
    Operating System:
    • Windows 7

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,118
    Vote Rating
    855
    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


    Thanks for the report, this has been fixed for 4.1.3
    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.

Thread Participants: 1