[FIXED] [V0.6] TabPanel and GridPanel

  1. #1

    [FIXED] [V0.6] TabPanel and GridPanel

    Hello,

    The below GridPanel has a problem with TabPanel tab switching:

    Example.aspx:
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
                {
                    new object[] { "Canada", "CA" },
                    new object[] { "United States", "USA" }
                };
    
            this.Store1.DataBind();
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />
            <ext:ScriptManager ID="ScriptManager2" runat="server" />
            <ExtJS:ViewPort ID="ViewPort" runat="server" Stateful="True">
                <Content>
                    <ExtJS:BorderLayout ID="BorderLayout" runat="server" RenderHidden="True">
                        <North Collapsible="True" CollapseMode="Mini" Split="True" MinHeight="43" MaxHeight="173">
                            <ExtJS:Panel ID="North" runat="server" Border="False" Height="173px">
                                <Content>
                                    <div class="uber">
                                        <p><a href="Example.aspx">Reload</a></p>
                                    
    
                                </Content>
                            </ExtJS:Panel>
                        </North>
                        <Center Collapsible="True" CollapseMode="Mini" Split="True" MinWidth="825">
                            <ExtJS:Panel ID="Center" runat="server" AutoScroll="True" Border="True">
                                <Content>
                                    <ExtJS:TabPanel ID="Tabs1" runat="server" ActiveTab="0" AutoPostBack="True" AutoHeight="True" AutoWidth="True" DeferredRender="True">
                                        <Tabs>
                                            <ExtJS:Tab ID="Tab1" runat="server" Title="Tab1" AutoHeight="True" AutoWidth="True">
                                                <Content>
                                                    <ext:Store 
                                                        ID="Store1" 
                                                        runat="server" 
                                                        AutoLoad="True">
                                                        <Reader>
                                                            <ext:ArrayReader ReaderID="Value">
                                                                <Fields>
                                                                    <ext:RecordField Name="Name" />
                                                                    <ext:RecordField Name="Value" />
                                                                </Fields>
                                                            </ext:ArrayReader>
                                                        </Reader>
                                                    </ext:Store>
                                                    <ext:GridPanel 
                                                        ID="GridPanel1" 
                                                        runat="server" 
                                                        StoreID="Store1" 
                                                        AutoExpandColumn="Name" 
                                                        AutoHeight="True" 
                                                        Stateful="True" 
                                                        StripeRows="True" 
                                                        Width="400">
                                                        <ColumnModel runat="server">
                                                            <Columns>
                                                                <ext:Column ColumnID="Name" DataIndex="Name" Header="Country" MenuDisabled="True" />
                                                                <ext:Column ColumnID="Value" DataIndex="Value" Header="Value" MenuDisabled="True" Width="255" />
                                                            </Columns>
                                                        </ColumnModel>
                                                    </ext:GridPanel>
                                                    Tab 1 Selected
                                                </Content>
                                            </ExtJS:Tab>
                                            <ExtJS:Tab ID="Tab2" runat="server" Title="Tab2" AutoHeight="True" AutoWidth="True">
                                                <Content>
                                                    Tab 2 Selected
                                                </Content>
                                            </ExtJS:Tab>
                                        </Tabs>
                                    </ExtJS:TabPanel>
                                </Content>
                            </ExtJS:Panel>
                        </Center>
                    </ExtJS:BorderLayout>
                </Content>
            </ExtJS:ViewPort>
        </form>
    </body>
    </html>
    Replication steps:

    1. Load page
    2. Notice the GridPanel loads the data (Canada, USA, etc ...) and "Tab 1 Selected" displays
    3. Click "Tab 2"
    4. Notice "Tab 2 Selected" displays
    5. Click "Tab 1"
    6. Notice GridPanel disappears and "Tab 1 Selected" displays
    7. Click "Tab 2"
    8. Notice "Tab 2 Selected" does not display

    Fails in IE6 and FF3.0.

    Cheers,
    Timothy
  2. #2

    RE: [FIXED] TabPanel and GridPanel

    Should be works properly now. The fix in svn.

    Vladimir Shcheglov
    Sr. Developer
  3. #3

    RE: [FIXED] TabPanel and GridPanel

    Hello vlad,

    The example I provided now works, but check out what happens when you introduce an UpdatePanel and change the ActiveTabIndex to the 2nd tab:

    Example.aspx:
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
                {
                    new object[] { "Canada", "CA" },
                    new object[] { "United States", "USA" }
                };
    
            this.Store1.DataBind();
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />
            <ext:ScriptManager ID="ScriptManager2" runat="server" />
            <ExtJS:ViewPort ID="ViewPort" runat="server" Stateful="True">
                <Content>
                    <ExtJS:BorderLayout ID="BorderLayout" runat="server" RenderHidden="True">
                        <North Collapsible="True" CollapseMode="Mini" Split="True" MinHeight="43" MaxHeight="173">
                            <ExtJS:Panel ID="North" runat="server" Border="False" Height="173px">
                                <Content>
                                    <div class="uber">
                                        <p><a href="Example.aspx">Reload</a></p>
                                    
    
                                </Content>
                            </ExtJS:Panel>
                        </North>
                        <Center Collapsible="True" CollapseMode="Mini" Split="True" MinWidth="825">
                            <ExtJS:Panel ID="Center" runat="server" AutoScroll="True" Border="True">
                                <Content>
                                    <asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
                                        <ContentTemplate>
                                            <ExtJS:TabPanel ID="Tabs1" runat="server" ActiveTabIndex="1" AutoPostBack="True" AutoHeight="True" AutoWidth="True" DeferredRender="True">
                                                <Tabs>
                                                    <ExtJS:Tab ID="Tab1" runat="server" Title="Tab1" AutoHeight="True" AutoWidth="True">
                                                        <Content>
                                                            <ext:Store 
                                                                ID="Store1" 
                                                                runat="server" 
                                                                AutoLoad="True">
                                                                <Reader>
                                                                    <ext:ArrayReader ReaderID="Value">
                                                                        <Fields>
                                                                            <ext:RecordField Name="Name" />
                                                                            <ext:RecordField Name="Value" />
                                                                        </Fields>
                                                                    </ext:ArrayReader>
                                                                </Reader>
                                                            </ext:Store>
                                                            <ext:GridPanel 
                                                                ID="GridPanel1" 
                                                                runat="server" 
                                                                StoreID="Store1" 
                                                                AutoExpandColumn="Name" 
                                                                AutoHeight="True" 
                                                                Stateful="True" 
                                                                StripeRows="True" 
                                                                Width="400">
                                                                <ColumnModel runat="server">
                                                                    <Columns>
                                                                        <ext:Column ColumnID="Name" DataIndex="Name" Header="Country" MenuDisabled="True" />
                                                                        <ext:Column ColumnID="Value" DataIndex="Value" Header="Value" MenuDisabled="True" Width="255" />
                                                                    </Columns>
                                                                </ColumnModel>
                                                            </ext:GridPanel>
                                                            Tab 1 Selected
                                                        </Content>
                                                    </ExtJS:Tab>
                                                    <ExtJS:Tab ID="Tab2" runat="server" Title="Tab2" AutoHeight="True" AutoWidth="True">
                                                        <Content>
                                                            Tab 2 Selected
                                                        </Content>
                                                    </ExtJS:Tab>
                                                </Tabs>
                                            </ExtJS:TabPanel>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </Content>
                            </ExtJS:Panel>
                        </Center>
                    </ExtJS:BorderLayout>
                </Content>
            </ExtJS:ViewPort>
        </form>
    </body>
    </html>
    Cheers,
    Timothy

Similar Threads

  1. [FIXED] [1.0] Bug in TabPanel
    By juane66 in forum Bugs
    Replies: 10
    Last Post: Jan 28, 2010, 10:53 AM
  2. [FIXED] [V0.8.0] TabPanel index bug
    By Timothy in forum Bugs
    Replies: 2
    Last Post: Jan 29, 2009, 11:12 AM
  3. [FIXED] [V0.8.0] TabPanel Visibility Bug
    By Timothy in forum Bugs
    Replies: 4
    Last Post: Jan 26, 2009, 1:20 PM
  4. [FIXED] [V0.6] TabPanel and SetActiveTab
    By Timothy in forum Bugs
    Replies: 2
    Last Post: Sep 10, 2008, 8:35 AM
  5. Replies: 1
    Last Post: Aug 06, 2008, 2:23 PM

Posting Permissions