Nested BorderLayout inside a TablePanel inside a BorderLayout
I've got a situation where I have a BorderLayout, where I want a TabPanel in the center region, with another BorderLayout in one of the tabs - all inside a resizable Window control.
I have an issue where the tabs are generating ok ( IE the css is drawing their height and width to fill the space of the outer center region, but everything inside said tab - IE the inner/nested BorderLayout is not displaying. Using firebug in firefox no heights/widths is being calculated for many of the divs that build up the control.
Any help with this would be really helpfull.
Code:
<ext:DesktopWindow
runat="server"
Icon="BookAddresses"
Width="960"
BodyBorder="false"
BodyStyle="padding:5px;"
Height="650"
PageX="125"
PageY="100">
<Body>
<ext:BorderLayout runat="server">
<North Collapsible="true" MarginsSummary="5 5 5 5" CollapseMode="Mini" >
<ext:Panel
runat="server"
Title="Description"
Height="100"
BodyStyle="padding: 5px;"
Frame="true"
Icon="Information">
<Body>
<h1>Title</h1>
</Body>
</ext:Panel>
</North>
<Center MarginsSummary="0 0 5 5">
<ext:Panel runat="server"
Frame="true"><Body>
<ext:FitLayout runat="server">
<ext:TabPanel runat="server"
TabPosition="Bottom"
>
<Tabs>
<ext:Tab
runat="server"
AutoHeight="true"
Title="Authorised requests"
>
<Body>
<ext:Panel runat="server" AutoHeight="true"><Body>
<ext:BorderLayout runat="server">
<West Collapsible="true" MarginsSummary="0 5 5 5">
<ext:FormPanel
runat="server"
FormID="_form2"
AutoScroll="true"
AutoHeight="true"
Frame="true"
Title="filter"
Width="280"
Layout="Form"
Icon="UserEdit">
<Body>
<ext:FormLayout runat="server">
<ext:Anchor Horizontal="100%">
<ext:TextField runat="server"
FieldLabel="First name"
MaxLength="100"
/>
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:TextField runat="server"
FieldLabel="Last name"
MaxLength="100"
/>
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:TextField runat="server"
FieldLabel="Company name"
MaxLength="100"
/>
</ext:Anchor>
</ext:FormLayout>
</Body>
<Buttons>
<ext:Button runat="server" Text="Search" Icon="Find" Type="Submit">
</ext:Button>
</Buttons>
</ext:FormPanel>
</West>
<Center MarginsSummary="0 0 5 5">
<ext:Panel
runat="server"
Frame="true"
Title="Contacts"
AutoHeight="true"
Icon="UserMagnify">
<Body>
<ext:GridPanel
runat="server"
StoreID="_store2"
Border="false">
<ColumnModel runat="server">
<Columns>
<ext:Column ColumnID="FirstName" DataIndex="FirstName" Header="First name" Width="120">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);"/>
</ext:Column>
<ext:Column ColumnID="LastName" DataIndex="LastName" Header="Last name" Width="120">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);"/>
</ext:Column>
<ext:Column ColumnID="CompanyName" DataIndex="CompanyName" Header="Company name" Width="150">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);"/>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="true">
<AjaxEvents>
</AjaxEvents>
</ext:RowSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolBar
runat="server"
PageSize="1000"
StoreID="store2"
/>
</BottomBar>
<LoadMask ShowMask="true" />
</ext:GridPanel>
</Body>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Body></ext:Panel>
</Body>
</ext:Tab>
<ext:Tab
runat="server"
Title="UnAuthorised requests"
/>
</Tabs>
</ext:TabPanel>
</ext:FitLayout>
</Body></ext:Panel>
</Center>
</ext:BorderLayout>
</Body>
</ext:DesktopWindow>
Much of the code has been removed to simplify and reduce the code so it's really just the layout i want to see working.
cheers in advance to anyone who can help.
RE: Nested BorderLayout inside a TablePanel inside a BorderLayout
I fixed this myself eventually.
A note for anyone exceperiening this: I required more FitLayout objects wrapping the panels and less AutoHeight="true" attributes.
