Bug with TabPanel in Internet Explorer

  1. #1

    Bug with TabPanel in Internet Explorer

    Hi,

    I don't know if this is actually a bug but is quite annoying. The problems is when tab changes in IE 8 and IE 9 (maybe in IE 7 too). When I have tab panel with height greater than the browser height, when I change the tabs with mouse click, the IE 8 and 9 scroll so the tab panels are put on the top of the screen.

    Here is an example code. You can test it in IE 8/9.

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>TEST</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="TestRM" runat="server" Theme="Default" />
            <ext:Panel runat="server" Title="Header Panel" AutoWidth="true" Height="200">
                <Content><h1>Some HTML content</h1></Content>
            </ext:Panel>
            <ext:TabPanel runat="server" AutoWidth="true" Height="2000">
                <Items>
                    <ext:Panel runat="server" Title="Tab 1" AutoWidth="true">
                        <Content><h1>Click on TAB 2 to see the problem in IE 8 and 9</h1></Content>
                    </ext:Panel>
                    <ext:Panel runat="server" Title="Tab 2" AutoWidth="true">
                        <Content><h1>Click on TAB 1 to see the problem in IE 8 and 9</h1></Content>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </form>
    </body>
    </html>
    This bug is specific only for Internet Explorer, and with little debugging I found that the problem is in the function
    onStripMouseDown in the TabPanel Class. The function code is:

    function (e){
    	if(e.button!==0){return;}
    	if(!Ext.isIE9){e.preventDefault();}
    
    	this.focus();
    
    	var t=this.findTargets(e);if(t.close){this.closeTab(t.item);return;}
    	if(t.item&&t.item!=this.activeTab){if(Ext.isIE9){this.setActiveTab.defer(100,this,[t.item]);}else{this.setActiveTab(t.item);}}
    }
    The problem in this function is this.focus();. When I removed this code the changing between the tabs started to work OK, without scrolling. I don't know if calling focus() is important for functionality of TabPanel, so I suggest to remove that code. As I said I don't know if this really is a bug, but surely is annoying. Now I overrided the function without the focus(), to get the expected functionality in IE.

    Also the tab changes on mouse middle button click in IE 9. This is not case in IE 8, so I suppose this is another bug, because tab changing should work only for left mouse click.

    Greetings,
    Dimitar
    Last edited by dimitar; Jul 22, 2011 at 9:18 PM.

Similar Threads

  1. Internet Explorer exception
    By igitur in forum 1.x Help
    Replies: 3
    Last Post: Oct 06, 2010, 2:17 PM
  2. [CLOSED] internet explorer cannot open the internet site
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 28, 2009, 10:30 AM
  3. Internet Explorer 8
    By Ben in forum Open Discussions
    Replies: 3
    Last Post: Feb 25, 2009, 12:38 AM
  4. TabPanel scroll problem in Internet Explorer
    By fquintero in forum 1.x Help
    Replies: 4
    Last Post: Nov 26, 2008, 9:07 PM
  5. Replies: 2
    Last Post: Oct 21, 2008, 12:52 PM

Posting Permissions