Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    3
    Vote Rating
    0
    greebo is on a distinguished road

      0  

    Default Ext.dom.AbstractElement hasCls bug (dom.classList is undefined)

    Ext.dom.AbstractElement hasCls bug (dom.classList is undefined)


    REQUIRED INFORMATION

    (first bug report, hope I did it ok!)

    Ext version tested:
    • Ext 4.1.0

    Browser versions tested against:
    • Firefox 8.0 (firebug 1.9.2 installed; Fedora 15)
    • Firefox 12.0 (firebug 1.9.2 installed; Windows 7)
    • Chrome 19 (Windows 7)
    Description:
    • The hasCls method in the file src/core/src/dom/AbstractElement.style.js contains the following line (line 237):
    Code:
    return (dom && className) ? dom.classList.contains(className) : false;
    • On certain browsers, dom.classList returns as undefined, causing the whole method to break, causing visual errors in some situations (see below).

    Steps to reproduce the problem:
    • In the code example below is a tabpanel set up with 2 tabs, the first tab contains a button and a panel. when the button is pushed, the panel uses the ElementLoader.load method to load a url ("/rawr.html"). The contents of that page are loaded as expected into the panel.
    • Click to tab 2
    • Click back to tab 1

    The result that was expected:
    • Tabs at the top of the screen should not disappear

    The result that occurs instead:
    • Tabs at the top of the screen disappear

    Test Case:

    Code:
        Ext.onReady( function(){
                    var adminPanel = Ext.createWidget('tabpanel', {
                        region: 'center',
                        activeTab: 0,
                        width: 500,
                        height: 500,
                        id: 'main-tabs',
                        items: [{
                                id: 'tab-1',
                                xtype: 'panel',
                                title: 'tab1',
                                items: [{
                                        id: "panel-1",
                                        html: 'tab 1 html',
                                        layout: 'auto'
                                    }],
                                tbar: [
                                    {
                                        text: "push me!",
                                        handler: function(){
                                            Ext.getCmp("panel-1").el.load({
                                                url: "/rawr.html"
                                            });
                                        }
                                    }
                                ]
                            },{
                                id: 'tab-2',
                                xtype: 'panel',
                                title: 'tab2',
                                html: 'tab 2 html'
                            }]
                    });
    
                    Ext.create('Ext.container.Viewport', {
                        layout: 'border',
                        renderTo: Ext.getBody(),
                        items: adminPanel
                    });
    
                });

    /rawr.html contains nothing more than the following:
    Code:
    <html>
    <body>
    rawr
    </body>
    </html>


    HELPFUL INFORMATION


    Possible fix:
    • Changing the line so that it reads as follows seems to do the trick:
      Code:
      return (dom && className) ? dom.classList && dom.classList.contains(className) : false;

    Operating System:
    • Fedora 15
    • Windows 7

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,908
    Vote Rating
    626
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The method is created at runtime which checks for classList support:

    Code:
    // In another file
    ClassList: !!document.documentElement.classList
    
    
    hasCls: hasClassList ?
        function (className) {
            var dom = this.dom;
                return (dom && className) ? dom.classList.contains(className) : false;
            } :
            function(className) {
                var dom = this.dom;
                return dom ? className && (' '+dom.className+' ').indexOf(' '+className+' ') != -1 : false;
            }
    Also note that what you're loading into the panel isn't valid. It is supposed to load a document fragment, not a whole document. You can't nest html/body tags,
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Posts
    3
    Vote Rating
    0
    greebo is on a distinguished road

      0  

    Default


    Also note that what you're loading into the panel isn't valid. It is supposed to load a document fragment, not a whole document. You can't nest html/body tags,
    Ah, yes sorry about that. The bug still exists even if the html file's contents are
    Code:
    rawr



    Is the [INFOREQ] aimed at me? Not sure what else you're looking for if it is.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,908
    Vote Rating
    626
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Right, I see. You can't overwrite the "el" of the panel, it has a whole other bunch of markup (the header, the body). Note that the error doesn't really relate to classList at all, rather this.dom is undefined because it's trying to get a reference to something (maybe the body), that you have since removed from the dom by overwriting the whole element.

    Instead, you should use the component loader class:

    Code:
    Ext.onReady(function() {
        var adminPanel = Ext.createWidget('tabpanel', {
            region: 'center',
            activeTab: 0,
            width: 500,
            height: 500,
            id: 'main-tabs',
            items: [{
                id: 'tab-1',
                title: 'tab1',
                items: [{
                    id: "panel-1",
                    html: 'tab 1 html',
                    loader: {
                        url: 'foo.html'
                    }
                }],
                tbar: [{
                    text: "push me!",
                    handler: function() {
                        Ext.getCmp("panel-1").getLoader().load();
                    }
                }]
            }, {
                id: 'tab-2',
                title: 'tab2',
                html: 'tab 2 html'
            }]
        });
    
        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            renderTo: Ext.getBody(),
            items: adminPanel
        });
    
    });
    If you absolutely need to use load() on Ext.Element, then you want to call

    Code:
    panel.body.load()
    Marking as closed.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Posts
    3
    Vote Rating
    0
    greebo is on a distinguished road

      0  

    Default


    Ah. Yep that fixes it, thanks!

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    4
    Vote Rating
    0
    ivan5o is on a distinguished road

      0  

    Default The same bug, similar situation

    The same bug, similar situation


    I'm getting the same error in my case. I don't use load() at all, but there are some similarities.

    I supply el to the panel to wrap its contents by ExtJS UI. Then this error happens. In this moment dom is a TextNode which has no classList property (by specification).

    Can that line of code be fixed please?
    Thanks, Peter

Thread Participants: 2