Nested BorderLayout inside a TablePanel inside a BorderLayout

  1. #1

    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.

    <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.
  2. #2

    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.

Similar Threads

  1. Replies: 0
    Last Post: Apr 19, 2012, 3:52 PM
  2. Replies: 10
    Last Post: Sep 22, 2010, 10:07 PM
  3. Replies: 0
    Last Post: May 27, 2009, 3:12 AM
  4. Replies: 1
    Last Post: May 10, 2009, 2:15 PM
  5. Replies: 10
    Last Post: Sep 12, 2008, 4:26 PM

Posting Permissions