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,786
    Vote Rating
    597
    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,786
    Vote Rating
    597
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."