[CLOSED] Tab panel problem in Internet Explorer 8

Page 1 of 2 12 LastLast
  1. #1

    Tab panel problem in Internet Explorer 8 e 7

    Hi,

    I´m using a tab panel in my project.

    Click image for larger version. 

Name:	001.jpg 
Views:	304 
Size:	29.8 KB 
ID:	3593

    When several links are clicked simultaneously and quickly form is not showing. This occurs when Internet Explorer 8 is utilized. In 9 internet explorer it works normally.

    Click image for larger version. 

Name:	002.jpg 
Views:	251 
Size:	34.7 KB 
ID:	3594

    If i click in just one it´s work fine.

    Click image for larger version. 

Name:	003.jpg 
Views:	235 
Size:	44.4 KB 
ID:	3595

    What can i do to this work well? Here is the source code:

    Tab page:


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Teste.aspx.cs" Inherits="TestTab.Teste" %>
    
    <%@ 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 id="Head1" runat="server">
        <title></title>
        <script type="text/javascript">
            var addTab = function (tabPanel, id, url) {
                var tab = tabPanel.getComponent(id);
    
                if (!tab) {
                    tab = tabPanel.add({
                        id: id,
                        title: url,
                        closable: true,
                        autoLoad: {
                            showMask: true,
                            url: url,
                            mode: "iframe",
                            maskMsg: "Loading " + url + "..."
                        }
                    });
    
                    tab.on("activate", function () {
                        var item = MenuPanel1.menu.items.get(id + "_item");
    
                        if (item) {
                            MenuPanel1.setSelection(item);
                        }
                    }, this);
                }
    
                tabPanel.setActiveTab(tab);
            }
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Window ID="Window1" 
                runat="server" 
                Title="Adding tab"
                Width="700" 
                Height="500" 
                Icon="Link" 
                Layout="border">
                <Items>
                    <ext:MenuPanel ID="MenuPanel1" runat="server" Width="200" Region="West">
                        <Menu ID="Menu1" runat="server">
                            <Items>
                                <ext:MenuItem ID="MenuItem1" runat="server" Text="Test 1">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, 'Test 1', 'Sample1.aspx');" />
                                    </Listeners>
                                </ext:MenuItem>
                                
                                <ext:MenuSeparator />
                                
                                <ext:MenuItem ID="MenuItem2" runat="server" Text="Test 2">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, 'Test 2', 'Sample1.aspx');" />
                                    </Listeners>
                                </ext:MenuItem>
                                
                                <ext:MenuSeparator />
                                
                                <ext:MenuItem ID="MenuItem3" runat="server" Text="Test 3">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, 'Test 3', 'Sample1.aspx');" />
                                    </Listeners>
                                </ext:MenuItem>
    
                                <ext:MenuSeparator />
    
                                 <ext:MenuItem ID="MenuItem4" runat="server" Text="Test 4">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, 'Test 4', 'Sample1.aspx');" />
                                    </Listeners>
                                </ext:MenuItem>
    
                                <ext:MenuSeparator />
    
                                 <ext:MenuItem ID="MenuItem5" runat="server" Text="Test 5">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, 'Test 5', 'Sample1.aspx');" />
                                    </Listeners>
                                </ext:MenuItem>
    
                                <ext:MenuSeparator />
    
                                 <ext:MenuItem ID="MenuItem6" runat="server" Text="Test 6">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, 'Test 6', 'Sample1.aspx');" />
                                    </Listeners>
                                </ext:MenuItem>
                            </Items>
                        </Menu>
                    </ext:MenuPanel>
                    <ext:TabPanel ID="TabPanel1" runat="server" Region="Center" />
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    Form Page:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Sample1.aspx.cs" Inherits="TestTab.Sample1" %>
    
    <%@ 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 id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="rmPrincipal" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server">
            <Content>
                <ext:BorderLayout ID="Border" runat="server">
                    <Center>
                        <ext:Panel ID="Panel2" runat="server" Border="false">
                            <Content>
                                <ext:FitLayout ID="FitLayout1" runat="server">
                                    <Items>
                                        <ext:Panel ID="pnlPrincipal" runat="server" BodyStyle="padding:10px 10px 10px 10px;"
                                            AutoScroll="true">
                                            <Content>
                                                <ext:BorderLayout ID="BorderLayout1" runat="server">
                                                    <Center MarginsSummary="5 5 5 5">
                                                        <ext:Panel ID="Panel1" runat="server" Frame="true" Title="Filtros de Pesquisa" AutoScroll="true">
                                                            <Content>
                                                                <ext:FormPanel ID="frmPesquisaTratamento" runat="server" AutoWidth="true">
                                                                    <Content>
                                                                        <ext:TableLayout ID="TableLayout1" runat="server" Columns="2" LabelAlign="top">
                                                                            <Cells>
                                                                                <ext:Cell CellCls="cell">
                                                                                    <ext:Container ID="Cnt" runat="server" Layout="Form">
                                                                                        <Items>
                                                                                            <ext:TextField ID="txtFiltroNome" Width="300" runat="server" FieldLabel="Pesquisa"
                                                                                                MaxLength="50" />
                                                                                        </Items>
                                                                                    </ext:Container>
                                                                                </ext:Cell>
                                                                                <ext:Cell CellCls="cell">
                                                                                    <ext:Container ID="Container2" runat="server" Layout="Form">
                                                                                        <Items>
                                                                                            <ext:RadioGroup ID="rgSituacao" runat="server" FieldLabel="Situação" Width="190"
                                                                                                BlankText="Obrigatório">
                                                                                                <Items>
                                                                                                    <ext:Radio ID="rdAtivo" runat="server" BoxLabel="Ativo" LabelStyle="display:none"
                                                                                                        Checked="true" />
                                                                                                    <ext:Radio ID="rdInativo" runat="server" BoxLabel="Inativo" LabelStyle="display:none" />
                                                                                                    <ext:Radio ID="rdTodos" runat="server" BoxLabel="Todos" LabelStyle="display:none" />
                                                                                                </Items>
                                                                                            </ext:RadioGroup>
                                                                                        </Items>
                                                                                    </ext:Container>
                                                                                </ext:Cell>
                                                                            </Cells>
                                                                        </ext:TableLayout>
                                                                    </Content>
                                                                </ext:FormPanel>
                                                            </Content>
                                                        </ext:Panel>
                                                    </Center>
                                                    <East MarginsSummary="5 5 5 5">
                                                        <ext:FormPanel ID="frmDetails" runat="server" Frame="true" Title="Detalhes" Width="250"
                                                            Icon="ApplicationFormEdit" AutoScroll="true">
                                                            <Content>
                                                                <ext:FormLayout ID="FormLayout1" LabelAlign="Top" runat="server">
                                                                    <Anchors>
                                                                        <ext:Anchor>
                                                                            <ext:FieldSet ID="FieldSet1" runat="server" Title="Masculino" Icon="Male" Width="218">
                                                                                <Items>
                                                                                    <ext:Container ID="Container1" runat="server" Layout="Form">
                                                                                        <Items>
                                                                                            <ext:TextField ID="txtAbreviaturaM" runat="server" FieldLabel="Abreviatura" Width="196"
                                                                                                Disabled="true" AllowBlank="false" MaxLength="30">
                                                                                            </ext:TextField>
                                                                                            <ext:TextField ID="txtDescricaoM" runat="server" FieldLabel="Tratamento" Width="196"
                                                                                                Disabled="true" AllowBlank="false" MaxLength="70">
                                                                                            </ext:TextField>
                                                                                            <ext:TextField ID="txtEnderecamentoM" runat="server" FieldLabel="Endereçamento" Width="196"
                                                                                                Disabled="true" AllowBlank="false" MaxLength="40">
                                                                                            </ext:TextField>
                                                                                            <ext:TextField ID="txtVocativoM" runat="server" FieldLabel="Vocativo" Width="196"
                                                                                                Disabled="true" AllowBlank="false" MaxLength="40">
                                                                                            </ext:TextField>
                                                                                            <ext:TextField ID="txtFechamentoM" runat="server" FieldLabel="Fechamento" Width="196"
                                                                                                Disabled="true" AllowBlank="false" MaxLength="40">
                                                                                            </ext:TextField>
                                                                                        </Items>
                                                                                    </ext:Container>
                                                                                </Items>
                                                                            </ext:FieldSet>
                                                                        </ext:Anchor>
                                                                        <ext:Anchor>
                                                                            <ext:FieldSet ID="FieldSet2" runat="server" Title="Feminino" Icon="Female" Width="218">
                                                                                <Items>
                                                                                    <ext:Container ID="Container3" runat="server" Layout="Form">
                                                                                        <Items>
                                                                                            <ext:TextField ID="txtAbreviaturaF" runat="server" FieldLabel="Abreviatura" Width="196"
                                                                                                Disabled="true" AllowBlank="false" MaxLength="30">
                                                                                            </ext:TextField>
                                                                                            <ext:TextField ID="txtDescricaoF" runat="server" FieldLabel="Tratamento" Width="196"
                                                                                                Disabled="true" AllowBlank="false" MaxLength="70">
                                                                                            </ext:TextField>
                                                                                            <ext:TextField ID="txtEnderecamentoF" runat="server" FieldLabel="Endereçamento" Width="196"
                                                                                                Disabled="true" AllowBlank="false" MaxLength="40">
                                                                                            </ext:TextField>
                                                                                            <ext:TextField ID="txtVocativoF" runat="server" FieldLabel="Vocativo" Width="196"
                                                                                                Disabled="true" AllowBlank="false" MaxLength="40">
                                                                                            </ext:TextField>
                                                                                            <ext:TextField ID="txtFechamentoF" runat="server" FieldLabel="Fechamento" Width="196"
                                                                                                Disabled="true" AllowBlank="false" MaxLength="40">
                                                                                            </ext:TextField>
                                                                                        </Items>
                                                                                    </ext:Container>
                                                                                </Items>
                                                                            </ext:FieldSet>
                                                                        </ext:Anchor>
                                                                        <ext:Anchor>
                                                                            <ext:Checkbox ID="chkAtivo" runat="server" BoxLabel="Ativo" FieldLabel="Situação"
                                                                                Disabled="true">
                                                                            </ext:Checkbox>
                                                                        </ext:Anchor>
                                                                    </Anchors>
                                                                </ext:FormLayout>
                                                            </Content>
                                                        </ext:FormPanel>
                                                    </East>
                                                </ext:BorderLayout>
                                            </Content>
                                        </ext:Panel>
                                    </Items>
                                </ext:FitLayout>
                            </Content>
                        </ext:Panel>
                    </Center>
                </ext:BorderLayout>
            </Content>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by pdcase; Jan 17, 2012 at 4:23 PM.
  2. #2
    Hi,

    Please add
    hideMode : "offsets"
    into a tab's config.

    Example
    tab = tabPanel.add({
        id : id,
        hideMode : "offsets",
        ...
    });
  3. #3
    In IE9 and IE8 works perfect. Any suggestions to work in IE7 as well?
  4. #4
    Please provide more info how exactly does it not work in IE7?
  5. #5
    We can see the problem when all tabs are opened quickly. The result is this:

    Click image for larger version. 

Name:	004.jpg 
Views:	173 
Size:	58.3 KB 
ID:	3597
  6. #6
    Confirmed.

    I can suggest the following fix for IE7.

    Please replace the piece of code where an "activate" listener is attached to a tab with:
    tab.on("activate", function () {
        var item = MenuPanel1.menu.items.get(id + "_item");
     
        if (item) {
            MenuPanel1.setSelection(item);
        }
    
        if (Ext.isIE7 && !this.repaintedIE7) {
            var iframe = this.getBody();
            if (iframe && iframe.Ext) {
                iframe.Ext.getBody().repaint();
                this.repaintedIE7 = true;
            }
        }
    });
  7. #7
    When this.getBody() is executed the following message appears:

    Click image for larger version. 

Name:	006.jpg 
Views:	116 
Size:	20.2 KB 
ID:	3604
  8. #8
    I guess you didn't remove "this" scope in the on method.

    Please post the full addTab function.
  9. #9
    I've found a solution:

    tab.on("activate", function () 
    {                   
           var item = MenuPanel1.menu.items.get(id + "_item");
           if (item) 
           {                        
                 MenuPanel1.setSelection(item); 
           }        
           if (!Ext.isIE8) 
           {      
                   if (!tabPanel.getItem(id).repaintedIE) 
                   {
                         var ibody = tabPanel.getItem(id).getBody();
                         if (ibody && ibody.Ext) 
                         {         
                                 ibody.Ext.getBody().repaint()    
                                 this.repaintedIE = true;       
                          }           
                   }        
             }    
    }, this);
  10. #10
    Yes, you have not removed
    , this
    at the end of the code. It causes the problem.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] ViewPort Internet Explorer bug
    By boris in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 28, 2012, 12:01 PM
  2. Panel not resizing in Internet Explorer 6
    By dbassett74 in forum 1.x Help
    Replies: 3
    Last Post: May 29, 2009, 12:46 PM
  3. [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
  4. Internet Explorer 8
    By Ben in forum Open Discussions
    Replies: 3
    Last Post: Feb 25, 2009, 12:38 AM
  5. TabPanel scroll problem in Internet Explorer
    By fquintero in forum 1.x Help
    Replies: 4
    Last Post: Nov 26, 2008, 9:07 PM

Posting Permissions