Jan 23, 2011, 1:21 PM
Height layout problem
Hi,
I'm stuck with a layout problem...
I currently have the layout explained below (simplified, stripped of all events/listeners/logic).
I want to make the panel "Panel3" (effectively the Tree) fill the rest of the page.
The FormPanel should be autoheight to its content, which seems to be working.
Then I want the Tree to take up the rest of the page, displaying the "BottomBar" statusbar at the bottom of the page.
When folding out nodes in the Tree (currently empty), I would like the Tree scroll, not the entire page.
In short terms - The Tree should use all available "space" on the page, not already used by other "items"...
It feels like I've tried everything, fitlayout, viewport, javascripting, and now I'm back to the basic layout...
It may be hard to understand my request by only looking at the code... running the code should show you what i mean...
Of course, it would be a big plus :D: if the "autoheight" reacted and adapted itself if the FormPanel is collapsed, or if the window is resized, although it's not required at this point.
I'm stuck with a layout problem...
I currently have the layout explained below (simplified, stripped of all events/listeners/logic).
I want to make the panel "Panel3" (effectively the Tree) fill the rest of the page.
The FormPanel should be autoheight to its content, which seems to be working.
Then I want the Tree to take up the rest of the page, displaying the "BottomBar" statusbar at the bottom of the page.
When folding out nodes in the Tree (currently empty), I would like the Tree scroll, not the entire page.
In short terms - The Tree should use all available "space" on the page, not already used by other "items"...
It feels like I've tried everything, fitlayout, viewport, javascripting, and now I'm back to the basic layout...
It may be hard to understand my request by only looking at the code... running the code should show you what i mean...
Of course, it would be a big plus :D: if the "autoheight" reacted and adapted itself if the FormPanel is collapsed, or if the window is resized, although it's not required at this point.
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server"></ext:ResourceManager>
<form id="form1" runat="server">
<div>
<ext:FormPanel runat="server" Border="false" MonitorValid="true">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:Button ID="Save" runat="server" Icon="Accept" Text="Save" FormBind="true"></ext:Button>
<ext:ToolbarFill />
<ext:Button ID="Delete" runat="server" Icon="Delete" Text="Delete"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel ID="Panel1" runat="server" Title="UnitType Details" AutoHeight="true" FormGroup="true" Padding="10">
<Items>
<ext:ComboBox ID="ComboBox2" runat="server" Width="400" FieldLabel="Manufacture"
EmptyText="Select manufacture" TypeAhead="true" Mode="Local" AllowBlank="false"
DisplayField="name" ValueField="id" IndicatorIcon="BulletRed" FireSelectOnLoad="true">
</ext:ComboBox>
<ext:TextField ID="ModelName" runat="server" Width="400" FieldLabel="Model name"
AllowBlank="false" EmptyText="Enter model name" IndicatorIcon="BulletRed">
</ext:TextField>
<ext:TextField ID="Vendor" runat="server" Width="400" FieldLabel="Vendor" EmptyText="Enter vendor name"
IndicatorIcon="BulletGreen">
</ext:TextField>
<ext:TextField ID="Description" runat="server" Width="400" FieldLabel="Description"
EmptyText="Enter description" IndicatorIcon="BulletGreen">
</ext:TextField>
<ext:ComboBox ID="ComboBox1" runat="server" Width="400" FieldLabel="Parameters" EmptyText="Copy parameters from..."
IndicatorIcon="BulletGreen" TypeAhead="true" Mode="Local" AllowBlank="true" TriggerAction="All"
DisplayField="name" ValueField="name">
</ext:ComboBox>
</Items>
</ext:Panel>
</Items>
<Listeners>
<ClientValidation Handler="#{Save}.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
<ext:Panel ID="Panel3" runat="server" Title="Parameters" AutoWidth="true" FormGroup="true" Padding="4">
<Items>
<ext:TreeGrid runat="server" ID="Parameters" AutoWidth="true" RootVisible="false">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:TriggerField ID="TriggerField1" runat="server" EnableKeyEvents="true" EmptyText="Filter..."
Width="200">
<Triggers>
<ext:FieldTrigger Icon="Clear" />
<ext:FieldTrigger Icon="Combo" />
</Triggers>
</ext:TriggerField>
<ext:ToolbarSpacer />
<ext:ToolbarSpacer />
<ext:Button ID="Button1" runat="server" Text="Add parameter" Icon="Add"></ext:Button>
<ext:ToolbarSeparator></ext:ToolbarSeparator>
<ext:Button ID="Button2" runat="server" Text="Expand All"></ext:Button>
<ext:ToolbarSeparator></ext:ToolbarSeparator>
<ext:Button ID="Button3" runat="server" Text="Collapse All"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Columns>
<ext:TreeGridColumn Header="Parameter" Width="300" DataIndex="Parameter" />
<ext:TreeGridColumn Header="Flags" Width="100" DataIndex="Flags" />
<ext:TreeGridColumn Header="Full path" Width="300" DataIndex="FullPath" Hidden="true" />
</Columns>
<BottomBar>
<ext:StatusBar ID="StatusBar1" runat="server" AutoClear="1500" Text="BottomBar" />
</BottomBar>
</ext:TreeGrid>
</Items>
</ext:Panel>
</div>
</form>
</body>