Jan 06, 2011, 9:50 PM
Grid panel toolbars not shown correctly when grid is within a group tab panel
I cannot get the top or bottom toolbars to show properly when a grid panel is embedded in a group tab panel.
This code should run as is and both grid definitions are the same but display very differently.
This code should run as is and both grid definitions are the same but display very differently.
<%@ Page Language="C#" %>
<%@ 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">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
};
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<form id="Form1" runat="server">
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:GroupTabPanel ID="GroupTabPanel1"
runat="server"
Region="Center"
TabWidth="113"
ActiveGroupIndex="0"
Margins="0"
Padding="0">
<Groups>
<ext:GroupTab ID="GroupTab1" runat="server">
<Items>
<ext:Panel ID="Panel4" runat="server" Title="Summary" Padding="5" AutoScroll="true">
<Items>
<ext:GridPanel ID="HCLIST"
runat="server"
Height="200"
Title="Companies"
Collapsible="true"
Frame="true"
AutoExpandColumn="company"
StyleSpec="margin-bottom: 5px;"
Layout="Fit" >
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:ToolbarFill />
<ext:Button ID="Button1" runat="server" Icon="Email" Text="Send Email" />
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar2" runat="server" PageSize="5">
</ext:PagingToolbar>
</BottomBar>
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
<ext:RecordField Name="change" Type="Float" />
<ext:RecordField Name="pctChange" Type="Float" />
<ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
<ext:Column Header="Price" DataIndex="price">
</ext:Column>
<ext:Column ColumnID="Change" Header="Change" DataIndex="change">
</ext:Column>
<ext:Column Header="Change" DataIndex="pctChange">
</ext:Column>
<ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:GroupTab>
<ext:GroupTab ID="gtAudit" runat="server">
<Items>
<ext:Panel ID="Panel16"
runat="server"
Title="Audit Log"
TabTip="History of changes"
Icon="Email"
Padding="0"
/>
</Items>
</ext:GroupTab>
</Groups>
</ext:GroupTabPanel>
<ext:GridPanel ID="GridPanel1"
runat="server"
Region="South"
Height="300"
Title="HEABC Contacts"
Collapsible="true"
Frame="true"
AutoExpandColumn="company"
StyleSpec="margin-bottom: 5px;"
Layout="Fit" >
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:ToolbarFill />
<ext:Button ID="Button2" runat="server" Icon="Email" Text="Send Email" />
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="5">
</ext:PagingToolbar>
</BottomBar>
<Store>
<ext:Store ID="Store2" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
<ext:RecordField Name="change" Type="Float" />
<ext:RecordField Name="pctChange" Type="Float" />
<ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
<ext:Column Header="Price" DataIndex="price">
</ext:Column>
<ext:Column ColumnID="Change" Header="Change" DataIndex="change">
</ext:Column>
<ext:Column Header="Change" DataIndex="pctChange">
</ext:Column>
<ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel2" runat="server" SingleSelect="true" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
