[CLOSED] Adapt TabPanels height depending on the active Panels height?

  1. #1

    [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 =)

    <%@ 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]
  2. #2
    Ok, I found out that setting AutoHeight="true" on the GridPanels solved the problem!

    Well, lets hope some other person that has the same issue sees this post =)

Similar Threads

  1. [CLOSED] FieldSet height depending on content
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Jul 18, 2012, 12:18 AM
  2. [CLOSED] Height Issues when auto loading panels
    By craig2005 in forum 1.x Legacy Premium Help
    Replies: 19
    Last Post: Mar 21, 2011, 7:04 PM
  3. Replies: 1
    Last Post: May 28, 2010, 6:52 AM
  4. [CLOSED] [1.0] MessageBoxConfig textbox height - min height
    By methode in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 07, 2010, 10:12 AM
  5. Tab Height AutoLoad Height
    By jordnlvr in forum 1.x Help
    Replies: 0
    Last Post: Mar 26, 2010, 7:26 PM

Tags for this Thread

Posting Permissions