below are steps to reproduce the bug:
- Page loads and the "Active tab" height loads correctly
- 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:
- 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.
- 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.
- 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.
- 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">
</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 }
};
}
}
}
}