May 14, 2011, 10:47 AM
[CLOSED] Adapt TabPanels height depending on the active Panels height?
Hey!
I have a TabPanel with, in this case, two tabs.
Each tab has a GridPanel and depending on the number of items (or what Paging settings you have) in the GridPanels they are of course of different height.
I want the TabPanel to adapt to the height of the tab, which is does not do right now. Instead there is only one row visible, and then a scrollbar (inside the TabPanel) so you can scroll the items. The TabPanel should expand so it show all of the content in the tabs. How do I make that happen?
Here is an example so you can see what I am talking about =)
I have a TabPanel with, in this case, two tabs.
Each tab has a GridPanel and depending on the number of items (or what Paging settings you have) in the GridPanels they are of course of different height.
I want the TabPanel to adapt to the height of the tab, which is does not do right now. Instead there is only one row visible, and then a scrollbar (inside the TabPanel) so you can scroll the items. The TabPanel should expand so it show all of the content in the tabs. How do I make that happen?
Here is an example so you can see what I am talking about =)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplicationExtNetTest.Test.Default" %>
<%@ 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></title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<object> test1 = new List<object>();
test1.Add(new object[] { 1, "TestData1" });
test1.Add(new object[] { 2, "TestData2" });
Store_2.DataSource = test1;
Store_2.DataBind();
List<object> test2 = new List<object>();
test2.Add(new object[] { 1, "Object1" });
test2.Add(new object[] { 2, "Object2" });
test2.Add(new object[] { 3, "Object3" });
test2.Add(new object[] { 4, "Object4" });
test2.Add(new object[] { 5, "Object5" });
test2.Add(new object[] { 6, "Object6" });
Store_1.DataSource = test2;
Store_1.DataBind();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<div>
<ext:TabPanel ID="TabPanel1" runat="server" MonitorResize="true" Flex="1">
<Items>
<ext:Panel ID="Panel1" runat="server" Title="Test1" Layout="Fit" Border="true" MonitorResize="true">
<Items>
<ext:GridPanel ID="GridPanel_Customer1" runat="server"
StripeRows="true"
Header="true"
Border="true"
AutoExpandColumn="Name"
MonitorResize="true">
<Store>
<ext:Store ID="Store_2" runat="server" AutoDataBind="true" AutoLoad="true" IDMode="Explicit">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="Id" />
<ext:RecordField Name="Name" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel_Customer3" runat="server" >
<Columns>
<ext:Column ColumnID="Id" Header="ID" DataIndex="Id" Hidden="true" />
<ext:Column DataIndex="Name" Header="Name" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>
<ext:Panel ID="Panel2" runat="server" Title="TEst2" Layout="Fit" MonitorResize="true" Flex="1">
<Items>
<ext:GridPanel ID="GridPanel_2" runat="server"
StripeRows="true"
Header="true"
Border="true"
AutoExpandColumn="Name"
MonitorResize="true">
<Store>
<ext:Store ID="Store_1" runat="server" AutoDataBind="true" AutoLoad="true" IDMode="Explicit" >
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="Id" />
<ext:RecordField Name="Name" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server" >
<Columns>
<ext:Column ColumnID="Id" Header="ID" DataIndex="ID" Hidden="true" />
<ext:Column DataIndex="Name" Header="Name" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="4">
<Items>
<ext:Label ID="Label1" runat="server" Text="Page size:" />
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
<ext:ComboBox ID="ComboBox1" runat="server" Width="80">
<Items>
<ext:ListItem Text="2" />
<ext:ListItem Text="4" />
<ext:ListItem Text="6" />
<ext:ListItem Text="8" />
<ext:ListItem Text="10" />
</Items>
<SelectedItem Value="4" />
<Listeners>
<Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</div>
</form>
</body>
</html>
Last edited by Daniil; May 14, 2011 at 5:21 PM.
Reason: [CLOSED]