[CLOSED] tab/Panel autoheight not working

Page 2 of 3 FirstFirst 123 LastLast
  1. #11
    If the suggestion provided by Vladimir does not solve the problem, please simplify your sample down to the minimum required to reproduce the problem.

    Why is all that code required in the second tab? I also see 15 <ext:Store>'s configured, which do not appear to have anything to do with the problem.

    Please do not post code samples that are greater than 100 lines. All problems should be reproducible in <100 lines of code.

    Please review the following forum guidelines:

    http://forums.ext.net/showthread.php...ing-New-Topics

    http://forums.ext.net/showthread.php...ation-Required
    Geoffrey McGill
    Founder
  2. #12
    The solution solved the issue partially, when adding the listener the height of the active tab is set to 100% but unfortunately when you click the next tab it does not do the same job the second tab is still cut.
  3. #13
    Quote Originally Posted by otouri View Post
    The solution solved the issue partially, when adding the listener the height of the active tab is set to 100% but unfortunately when you click the next tab it does not do the same job the second tab is still cut.
    ok, thanks for the update. Glad to hear the solution helped.
    Geoffrey McGill
    Founder
  4. #14

    Partially

    The solution solved the issue partially,
    When adding the listener suggested, the height of the active tab was correct and set to 100% but unfortunately when you click the next tab it does not do the same job the second tab is still cut.

    I am working on providing a simple and clean sample code, i will post it shortly.

    Thank you
  5. #15

    Simplified sample code

    below are steps to reproduce the bug:

    1. Page loads and the "Active tab" height loads correctly
    2. Clicking the second tab "Tab not working properly" load the content of the second tab and set the height properly.
      below is where the problems starts:
    3. Inside "Tab not working properly" tab, if you click the button "Load data" that loads data into the gridpanel. The height of the gridpanel increases but not the one of the tab.
    4. If you change the tab from "Tab not working properly" to "Active tab" then get back to "Tab not working properly" then the height of that tab displays properly.
    5. If you change the page size from 5 to 10 which again increases the height of the gridpanel. The grid panel increases it's height but not the panle therefore part of the UI is cut.
    6. If you repeat step 4 the tab displays the height properly



    Sample Code:

    ASPX File:
    <%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="SampleCode.aspx.cs"
        Inherits="SecondaryDealLog.SampleCode" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <html>
    <head id="Head1" runat="server">
        <title>Sample code</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <div class="formHeader" style="font-weight: bold">
            Add/Edit Metadata</div>
        <ext:ResourceManager ID="ResourceManager2" runat="server" />
        <table style="width: 100%; padding: 10px 10px 10px 10px; vertical-align: top; background-color: #ffffff;"
            border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table style="vertical-align: top; background-color: #ffffff; border: 1px solid #8BB7E3"
                        cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td colspan="2">
                                &nbsp;
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <ext:TabPanel ID="TabPanel1" runat="server" Padding="15" BodyPadding="10">
                                    <Listeners>
                                        <AfterLayout Handler="this.doLayout();" Single="true" Delay="100" />
                                    </Listeners>
                                    <Items>
                                        <ext:Panel ID="Tab1" runat="server" Title="Active Tab" BodyPadding="6"
                                            BodyStyle="height: auto;">
                                            <Content>
                                                <table style="width: 60%; vertical-align: top; background-color: #FFFFFF; border: 1px solid #8BB7E3;"
                                                    cellpadding="5" cellspacing="0">
                                                    <tr>
                                                        <td colspan="6" valign="top" class="subFormHeader">
                                                            <p>
                                                                Hong Kong (CNN) -- North Korea's nuclear test prompted united condemnation and a
                                                                vow of tough action from the U.N. Security Council on Tuesday. The council issued
                                                                a statement slamming the underground nuclear test that jolted the already fragile
                                                                security situation in Northeast Asia. South Korean Foreign Minister Kim Sung-hwan,
                                                                repeating a statement to reporters outside council chambers, said the test violated
                                                                council resolutions, and "there continues to exist a clear threat to international
                                                                peace and security." Kim said council members will start work "on appropriate measures
                                                                in a Security Council resolution" and that "North Korea will be held responsible
                                                                for any consequences of this provocative act." The council is chaired this month
                                                                by South Korea.
                                                            </p>
                                                            <p>
                                                                Hong Kong (CNN) -- North Korea's nuclear test prompted united condemnation and a
                                                                vow of tough action from the U.N. Security Council on Tuesday. The council issued
                                                                a statement slamming the underground nuclear test that jolted the already fragile
                                                                security situation in Northeast Asia. South Korean Foreign Minister Kim Sung-hwan,
                                                                repeating a statement to reporters outside council chambers, said the test violated
                                                                council resolutions, and "there continues to exist a clear threat to international
                                                                peace and security." Kim said council members will start work "on appropriate measures
                                                                in a Security Council resolution" and that "North Korea will be held responsible
                                                                for any consequences of this provocative act." The council is chaired this month
                                                                by South Korea.
                                                            </p>
                                                            <p>
                                                                Hong Kong (CNN) -- North Korea's nuclear test prompted united condemnation and a
                                                                vow of tough action from the U.N. Security Council on Tuesday. The council issued
                                                                a statement slamming the underground nuclear test that jolted the already fragile
                                                                security situation in Northeast Asia. South Korean Foreign Minister Kim Sung-hwan,
                                                                repeating a statement to reporters outside council chambers, said the test violated
                                                                council resolutions, and "there continues to exist a clear threat to international
                                                                peace and security." Kim said council members will start work "on appropriate measures
                                                                in a Security Council resolution" and that "North Korea will be held responsible
                                                                for any consequences of this provocative act." The council is chaired this month
                                                                by South Korea.
                                                            </p>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </Content>
                                        </ext:Panel>
                                        <ext:Panel ID="Tab2" runat="server" Title="Tab not working properly" BodyPadding="6" BodyStyle="height: auto;">
                                            <Content>
                                                <table style="width: 60%; vertical-align: top; background-color: #FFFFFF; border: 1px solid #8BB7E3;"
                                                    cellpadding="5" cellspacing="0">
                                                    <tr>
                                                        <td colspan="6" valign="top" class="subFormHeader">
                                                            <ext:Button ID="btnSearchHLName" runat="server" Icon="Magnifier" Cls="formButtonExt2"
                                                                Text="load data" Height="25" Width="70">
                                                                <DirectEvents>
                                                                    <Click OnEvent="btnLoadData_Click" />
                                                                </DirectEvents>
                                                            </ext:Button>
                                                            <ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="700">
                                                                <Store>
                                                                    <ext:Store ID="Store1" runat="server" OnReadData="MyData_Refresh" PageSize="5">
                                                                        <Model>
                                                                            <ext:Model ID="Model1" runat="server">
                                                                                <Fields>
                                                                                    <ext:ModelField Name="company" />
                                                                                    <ext:ModelField Name="price" Type="Float" />
                                                                                    <ext:ModelField Name="change" Type="Float" />
                                                                                    <ext:ModelField Name="pctChange" Type="Float" />
                                                                                    <ext:ModelField Name="lastChange" Type="Date" />
                                                                                </Fields>
                                                                            </ext:Model>
                                                                        </Model>
                                                                    </ext:Store>
                                                                </Store>
                                                                <ColumnModel ID="ColumnModel1" runat="server">
                                                                    <Columns>
                                                                        <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="35" />
                                                                        <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                                                                        <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
                                                                        </ext:Column>
                                                                        <ext:Column ID="Column3" runat="server" Text="Change" Width="75" DataIndex="change">
                                                                        </ext:Column>
                                                                        <ext:Column ID="Column4" runat="server" Text="Change" Width="75" DataIndex="pctChange">
                                                                        </ext:Column>
                                                                        <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="85" DataIndex="lastChange"
                                                                            Format="H:mm:ss" />
                                                                    </Columns>
                                                                </ColumnModel>
                                                                <SelectionModel>
                                                                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
                                                                </SelectionModel>
                                                                <View>
                                                                    <ext:GridView ID="GridView1" runat="server" StripeRows="true">
                                                                    </ext:GridView>
                                                                </View>
                                                                <BottomBar>
                                                                    <ext:PagingToolbar ID="PagingToolbar1" runat="server">
                                                                        <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="1" />
                                                                                    <ext:ListItem Text="2" />
                                                                                    <ext:ListItem Text="10" />
                                                                                    <ext:ListItem Text="20" />
                                                                                </Items>
                                                                                <SelectedItems>
                                                                                    <ext:ListItem Value="10" />
                                                                                </SelectedItems>
                                                                                <Listeners>
                                                                                    <Select Handler="#{GridPanel1}.store.pageSize = parseInt(this.getValue(), 10); #{GridPanel1}.store.reload();" />
                                                                                </Listeners>
                                                                            </ext:ComboBox>
                                                                        </Items>
                                                                        <Plugins>
                                                                            <ext:ProgressBarPager ID="ProgressBarPager1" runat="server" />
                                                                        </Plugins>
                                                                    </ext:PagingToolbar>
                                                                </BottomBar>
                                                            </ext:GridPanel>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </Content>
                                        </ext:Panel>
                                    </Items>
                                </ext:TabPanel>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>
    Aspx.cs file:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.IO;
    using System.Text;
    using System.Collections;
    using System.Reflection;
    using System.Web.Security;
    using Ext.Net;
    using System.Xml.Xsl;
    using System.Xml;
    
    
    namespace SecondaryDealLog
    {
        public partial class SampleCode : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                    //this.BindData();
                }
            }
            protected void btnLoadData_Click(object sender, EventArgs e)
            {
              
                    this.BindData();
               
            }
    
            protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
            {
                this.BindData();
            }
    
            private void BindData()
            {
                Store store = this.GridPanel1.GetStore();
    
                store.DataSource = this.Data;
                store.DataBind();
            }
    
            private object[] Data
            {
                get
                {
                    DateTime now = DateTime.Now;
    
                    return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
                }
            }
    
    
    
          
           
        }
    }
  6. #16
    Thank you for a simplified sample.

    A DaLayout call of the Tab2 fixes the problem.
    protected void btnLoadData_Click(object sender, EventArgs e)
    {
        this.BindData();
        this.Tab2.DoLayout();
    }
    As a general recommendation, avoid using of HTML markup for layouting. I think it all can be done with Ext.NET containers and layouts.

    It should be easier (maybe, after some learning curve) and much more powerful.

    P.S. For the future. Please put the code behind into
    <script runat="server">
    directly on the ASPX page. This way we all get a standalone ASPX page to simply copy, paste and run.
  7. #17
    Thank you for the quick reply, your solution fixed only one issue.

    It does not fixe the panel height when you change the page size of the gridpanel.
  8. #18
    I would try the Store's DataChanged listener with this Handler.
    App.Tab2.doLayout();
  9. #19
    i tried you suggestion but it didn't work:
    <ext:Store ID="Store1" runat="server" OnReadData="MyData_Refresh" PageSize="5">
                                                                        <Listeners>
                                                                            <DataChanged Handler="App.Tab2.doLayout();"></DataChanged>
                                                                        </Listeners>
                                                                        <Model>
                                                                            <ext:Model ID="Model1" runat="server">
                                                                                <Fields>
                                                                                    <ext:ModelField Name="company" />
                                                                                    <ext:ModelField Name="price" Type="Float" />
                                                                                    <ext:ModelField Name="change" Type="Float" />
                                                                                    <ext:ModelField Name="pctChange" Type="Float" />
                                                                                    <ext:ModelField Name="lastChange" Type="Date" />
                                                                                </Fields>
                                                                            </ext:Model>
                                                                        </Model>
                                                                    </ext:Store>
  10. #20
    Apologize.

    This works.
    <Load Handler="App.Tab2.doLayout();" />
    You can even remove the server DoLayout call.
Page 2 of 3 FirstFirst 123 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Oct 04, 2012, 10:14 AM
  2. [CLOSED] MenuPanel AutoHeight is not working in V1.0?
    By vali1993 in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 23, 2010, 5:59 PM
  3. [1.0] Panel autoheight
    By SouthDeveloper in forum 1.x Help
    Replies: 2
    Last Post: Feb 12, 2010, 6:30 PM
  4. [CLOSED] panel autoheight
    By idrissb in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 18, 2009, 2:07 PM
  5. [CLOSED] GridPanel AutoHeight is not working like I would hope
    By SFritsche in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 29, 2009, 5:24 PM

Posting Permissions