PDA

View Full Version : [FIXED] [V0.6] TabPanel and GridPanel



Timothy
Sep 06, 2008, 3:33 PM
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

Vladimir
Sep 06, 2008, 6:39 PM
Should be works properly now. The fix in svn.

Timothy
Sep 07, 2008, 1:42 PM
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