1. #1
    Ext User
    Join Date
    Apr 2008
    Posts
    10
    Vote Rating
    0
    millenovecento is on a distinguished road

      0  

    Default TabPanel activate IE7 error --- Anchor name link FF2 scrolls whole page

    TabPanel activate IE7 error --- Anchor name link FF2 scrolls whole page


    Hi,

    i have created a nested layout and uploaded in a provisional domain.

    In the center region there is an iframe that loads the page layout-browser2.html and in the west region there is another iframe with some anchor name links.
    In the layout-browser2.html there is another viewport and in the east region of this page there is the tabpanel that cause an error on ie7.

    You can see the site in action here: http://www.albertoealessandra.it/extjs/

    1. It works fine in Safari/win and FF3 but in IE7 an error occurs at line 15661 of ext-all-debug.js.
    Error:
    Code:
    this[name] = Ext.get(pnode.appendChild(el));
    This error occurs when i add:
    Code:
    Ext.getCmp('objectstab').activate(myid);
    in layout-browser2.js
    or when i click on the second tabpanel


    2. In FF2 if the user clicks on an anchor name link in a frame before to resize the panel, the whole page scrolls up and not only the content of the frame with the anchor.


    This is the code:

    layout-browser.html (or index in the e.g.)
    Code:
    <html>
    <head>
        <title>Ext 2.0 Layout Examples</title>
            <link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css">
            <link rel="stylesheet" type="text/css" href="./resources/css/xtheme-slate.css">
            <script type="text/javascript" src="ext-base.js"></script>
            <script type="text/javascript" src="ext-all-debug.js"></script>
    
        <script type="text/javascript" src="layout-browser.js"></script>
    </head>
    <body>
        <div id="northpanel"></div>
         <div id="westpanel"></div>
        <div id="centerpanel"><iframe width="100%" height="100%" src="" frameborder='0' name="center"></iframe></div>
         <div id="eastpanel"><iframe width="100%" height="100%" src="" frameborder='0' name="east"></iframe></div>
         <div id="southpanel"></div>y
        <!--<div id="header"><h1><img src="./images/B.gif">&nbsp;<img src="./images/div.png"><img src="./images/refresh.png">&nbsp;<img src="./images/home.png">&nbsp;<img src="./images/page_log.png">&nbsp;<img src="./images/quit.png"><img src="./images/div.png"></h1></div>-->
        </body>
    </html>
    layout-browser.js:
    Code:
    Ext.onReady(function(){
        homepage = "wiki.html"
        homepage2 = "layout-browser2.html"
        Ext.QuickTips.init();
    
    
    
        // Finally, build the main layout once all the pieces are ready.  This is also a good
        // example of putting together a full-screen BorderLayout within a Viewport.
        layout = new Ext.Viewport({
        id: 'absolute-panel',
        title: 'Absolute Layout',
        layout: 'absolute',
        defaults: {
            
            //anchor: '-10, -10',
            height: 100,fitToFrame:true//, x: 10, y:10,
        },
        items:[new Ext.Panel({
        titlebar: false,
        layout:'border',
        anchor: '-10, -10',baseCls:'x-main',
        x: 10,
        y:10,
        items: [{
                     id:'north',baseCls:'x-top',
                     region:'north',
                     contentEl: 'northpanel',margins:'0 0 10 0',
                     collapsible:false,
                    height:58,
                    style:'height:58px;border:0px;border-bottom:15px solid #E00024;background:url(./images/top_bg.gif) repeat-x;',
                     fitToFrame:true,
                    html:'<table cellpadding=0 border=0px style="border-collapse:collapse" height=53px width="100%"><tr><td width="14" style="background:url(./images/top_left.gif)top left no-repeat"></td><td style="background:url(./images/top-bg.gif)"><div id="menubar2" ></div></td><td width="14px" style="background:url(./images/top_right.gif)top right no-repeat"></td></tr>'
                    },
    
                 {
                     id:'south',
                     split:true,
                     collapsible:true,
                     region:'south',
                     contentEl: 'southpanel'//,height:100
                     },
                 {
                     id:'east',
                     split:true,
                     collapsible:true,margins:'0 10 10 0',
                     region:'east',
                     contentEl: 'eastpanel',width:550
                     },
                 {
                     id:'west',
                     split:true,margins:'0 10 10 0',
                     collapsible:true,
                     region:'west',
                     contentEl: 'westpanel' ,width:350
                     },
                 {
                     id:'center',title:'&nbsp;',titlebar:true,collapsible:true,
                     region:'center',
                margins:'0 0 10 10',
                height: 960,
                     contentEl: 'centerpanel'
                     }
    
              ]
    })],
            renderTo: Ext.getBody()
        });
            loadPage(homepage,"center");
            loadPage(homepage2,"east");
    
            document.body.style.cursor = '';
            //msg.hide();
    });
    
    
    function loadPage(url,regionname,append,noclose){
    
        if(!noclose){
            Ext.getCmp('south').hide();
            Ext.getCmp('west').hide();
            //Ext.getCmp('east').hide();
            layout.doLayout();
         }
    
        if(! Ext.getCmp(regionname).isVisible() ){
            Ext.getCmp(regionname).show();
            layout.doLayout();
        }
    
        if( window.frames[regionname] ){
            window.frames[regionname].document.location = url;
        }
        else{
            //if(!append)
            //      layout.getComponent(regionname).remove(layout.getComponent(regionname).activeItem);
            var iframe = Ext.DomHelper.append(document.body,{tag: 'iframe', frameBorder: 0, name:regionname, src: url});
              var panel = new Ext.BoxComponent({region:'center',applyTo:iframe,autoWidth:true,autoHeigth:true, fitToFrame:true, closable:true});
    
              //layout.add(regionname, panel);
        }
    }
    layout-browser2.html
    Code:
    <html>
    <head>
        <title>Ext 2.0 Layout Examples</title>
        <link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css">
        <link rel="stylesheet" type="text/css" href="./resources/css/xtheme-slate.css">
        <script type="text/javascript" src="ext-base.js"></script>
        <script type="text/javascript" src="ext-all-debug.js"></script>
    
        <script type="text/javascript" src="layout-browser2.js"></script>
    
    </head>
    <body>
        <div id="northpanel2"></div>
         <div id="westpanel2"></div>
        <div id="centerpanel2"><div id="gridpanel">
    
                        <div id="gridbox" style="height:100%;width:100%;white-space:nowrap;overflow:hidden"></div>
                        <div id="welcome" style="text-align: center;background-color:#ededed;">
    
                                <table style="padding-left:30px;height:100%;" cellpadding=5>
                                    <tr>
                                        <td class="headerHome" height=100px><a href="#" onclick="loadContentPage('b1','new dynamic',url)">New tab</a>
                                            <br>
                                            <br>
                                            <br>
                                            Welcome to Be3a Content Repository System
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="formdata" valign=top>
                                            Here we should provide a short introduction to content management system.
                                            <ol>
                                                <li>
                                                    What is the puropse of CMS
                                                </li>
                                                <li>
                                                    What are the new features of this new version
                                                </li>
                                                <li>
                                                    How to upload new content objects
                                                </li>
                                                <li>
                                                    Etc...
                                                </li>
                                            </ol>
                                        </td>
                                    </tr>
                                </table>
    
                        </div>
                    </div>
    
            </div>
         <div id="eastpanel2"></div>
         <div id="southpanel2"></div>
        </body>
    </html>
    layout-browser2.js
    Code:
    /*
     * Ext JS Library 2.1
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */
    
    //
    // This is the main layout definition.
    //
    
    var actualCountry;
    var actualLanguage;
    var homepage;
    var permissionsRPC;
    var dialog;
    var logdialog;
    var hiddenmenu;
    var hiddenmenubar;
    var msg;
    var date = new Date();
    var detailsPanel;
    
    
    Ext.onReady(function(){
        homepage = "www.google.com"
        homepage2 = "http://www.google.com"
        url="list.html"
        Ext.QuickTips.init();
    
    
    var detailsPanel = new Ext.TabPanel({
                    id: 'objectstab',
                    activeItem: 0,
                    region: 'south',
                    split: true,
                    height: 350,
                    deferredRender:false,
                    floating:true,
                    autoScroll: false,
                    collapsible: false,
                    closable: false,
                    tabPosition: 'top',
                    closeOnTab: true,
                    alwaysShowTabs: true,
                    fitToFrame: true,
                    fitContainer: true,
                    titlebar: false,
                    items: [{
                        contentEl: 'welcome',
                        id: 'welcome',
                        title: 'welcome',autoWidth:true,
                        closable: false,
                        fitToFrame: true
                    }],
                    listeners: {
                        beforeremove: function(region, panel){
                        
                            
                        }
                    }//end listeners
                })
    editRegion = "south";
    
    
    
        // Finally, build the main layout once all the pieces are ready.  This is also a good
        // example of putting together a full-screen BorderLayout within a Viewport.
        layout = new Ext.Viewport({
        id: 'absolute-panel2',
        title: 'Absolute Layout',
        layout: 'absolute',
        defaults: {
            
            //anchor: '-10, -10',
            height: 100,fitToFrame:true//, x: 10, y:10,
        },
        items:[new Ext.Panel({
                titlebar: false,
                id: 'contAll2',
                layout: 'border',
                anchor: '0, 0',
                //region: 'center',
                border: false,
                items: [{
                    id: 'west2',
                    region: 'west',
                    contentEl: 'westpanel2',
                    title: '&nbsp;',
                    fitContainer: true,
                    split: true,
                    width: 180,
                    height:'100%',
                    titlebar: true,
                    collapsible: true,
                    minSize: 100,
                    maxSize: 600,
                    cmargins: '0 5 0 0',
                    shadow: true
                }, {
                    id: 'center2',
                    titlebar: false,
                    region: 'center',
                    contentEl: 'centerpanel2',
                    layout: 'border',
                    border: false,
                    items: [{
                        region: 'north',
                        //layout: 'fit',
                        fitToFrame: true,
                        autoScroll: false,
                        fitContainer: true,
                        titlebar: false,
                        height:28
                        },{
                        id: 'grid',
                        contentEl: 'gridpanel',
                        region: 'center',
                        layout: 'fit',
                        fitToFrame: true,
                        autoScroll: false,
                        fitContainer: true,
                        titlebar: false
                    }, detailsPanel]
                }]
            })],
            renderTo: Ext.getBody()
        });
            
            loadContentPage('b2','Dynamic tab',url);
    
            
    });
    
    
    
    function loadContentPage(myid,mytitle,url)
    {
    
        //document.body.style.cursor = 'wait';
    
        if (!Ext.getCmp('objectstab').getItem(myid)) {
            
            var iframe = Ext.DomHelper.append(document.body, {
                tag: 'iframe',
                height: '100%',
                width:'100%',
                frameBorder: 0,
                name: "frame_" + myid,
                src: url
            });
            
            //alert(document.body)
            //iframe.onload = function(){document.body.style.cursor = '';}
            
            var panel = new Ext.Panel({
                el: iframe,
                fitToFrame: true,
                fitContainer:true,    
                width:'100%',
                closable: true,
                id: myid,
                title: mytitle
            });
            Ext.getCmp('objectstab').add(panel);
            
            
        }
        else{
            //alert(window.frames["frame_"+myid])
            window.frames["frame_"+myid].document.location=url;
            
        }
        
        Ext.getCmp('objectstab').activate(myid);
    
    }

  2. #2
    Ext User
    Join Date
    Jul 2008
    Posts
    6
    Vote Rating
    0
    hakridge is on a distinguished road

      0  

    Default


    I also was receiving the exact same error as you. What happened to me was an element Id collision. IE apparently is case insensitive when it comes to element id's. FF, Safari, Opera, etc are not. By ensuring that every element rendered on the page was unique, regardless of casing, IE correctly picked the right element to render to.

  3. #3
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by hakridge View Post
    I also was receiving the exact same error as you. What happened to me was an element Id collision. IE apparently is case insensitive when it comes to element id's. FF, Safari, Opera, etc are not. By ensuring that every element rendered on the page was unique, regardless of casing, IE correctly picked the right element to render to.
    Eh, that's not true. In Fx (not FF!), the following works.
    HTML Code:
    <div id="testMe">testMe</div>
    <div id="testme">testme</div>
    Code:
    console.info(document.getElementById('testme').innerHTML); // Yields testme
    console.info(document.getElementById('testMe').innerHTML); // Yields testMe

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    http://www.mozilla.com/en-US/firefox...ses/1.0.6.html

    How do I spell Firefox? How do I abbreviate it?

    Firefox is spelled F-i-r-e-f-o-x - only the first letter capitalized (i.e. not FireFox, not Foxfire, FoxFire or whatever else a number of folk seem to think it to be called.) The preferred abbreviation is "Fx" or "fx".

  5. #5
    Ext User
    Join Date
    Jul 2008
    Posts
    6
    Vote Rating
    0
    hakridge is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    http://www.mozilla.com/en-US/firefox...ses/1.0.6.html

    How do I spell Firefox? How do I abbreviate it?

    Firefox is spelled F-i-r-e-f-o-x - only the first letter capitalized (i.e. not FireFox, not Foxfire, FoxFire or whatever else a number of folk seem to think it to be called.) The preferred abbreviation is "Fx" or "fx".
    1.) I was getting the exact same error the gentleman making the post was, and it was an id element collision causing the controls not to render properly in IE versus FF.
    2.) http://developer.mozilla.org/en/docs...#ID_Uniqueness This article explicitly recommends not to use case sensitivity for Id matching.
    3.) Is your above reply serious? If so, replying to someone twice, correcting them twice, and linking them to a whole section devoted to pointing out that an abbreviation is slightly wrong (I seriously doubt the OP wouldn't have understood what FF meant, I mean, you did), is a pretty childish move to make.

    Your reply to me in a previous thread initially regarding the accusations of that = this; was equally confrontational.

    You may mean well, but to a new ExtJS forum user, you're definitely coming off as a troll.

  6. #6
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by hakridge View Post
    Your reply to me in a previous thread initially regarding the accusations of that = this; was equally confrontational.

    You may mean well, but to a new ExtJS forum user, you're definitely coming off as a troll.
    Calm down. Don't take offense. Sheesh.