[CLOSED] Layout Issue in form

1 Attachment(s)

Hi,

I am hoping to see if any one can help me resolve this layout issue which I am struggling with for quite some time.

I am expecting a layout as attached.

I have arrived at the that layout except for the toolbar at the top.

I am using the follwing code that forms the 4 boxes.

I want to fit the toolbar on the top. How can I do that ?

Code:

<ext:Viewport ID="Viewport1" runat="server" Layout="HBoxLayout"> <LayoutConfig> <ext:HBoxLayoutConfig Align="Stretch" /> </LayoutConfig> <Items> <ext:FormPanel ID="LeftPanel" runat="server" Border="false" Header="false" Frame="true" > <LayoutConfig> <ext:VBoxLayoutConfig Align="Stretch" /> </LayoutConfig> <Items> <ext:GridPanel runat="server" ID="MainTable" Height="250" Padding="5" Frame="true" Title="Museum Component Information" MultiSelect="true" ButtonAlign="Right"> ... </ext:GridPanel> <ext:FormPanel runat="server" ID="HostDetails" Title="Museum Host Details" BodyPadding="10" AutoScroll="True" Frame="true" flex="1" > ... </ext:FormPanel> </Items> </ext:FormPanel> <ext:FormPanel ID="RightPanel" runat="server" Layout="VBoxLayout" Flex="1" > <LayoutConfig> <ext:VBoxLayoutConfig Align="Stretch"/> </LayoutConfig> <Items> <ext:GridPanel ID="ProjectPanel" Padding="5" Frame="true" runat="server" AutoScroll="true" Height="200" Title="Museum Projects"> </ext:GridPanlel> <ext:FormPanel runat="server" ID="ProjectForm" Title="Museum Project Details" ButtonAlign="Center" AutoScroll="True" BodyPadding="10" Split="true" Frame="true" Flex="1" > ... </ext:FormPanlel> </Items> </ext:Viewport>

Thanks,
Veda

Hello!

Please, don't forget to wrap your code in CODE tag: http://forums.ext.net/showthread.php?3440

To add TopBar, you should set BorderLayout to Viewport and out inside it new Panel with your items:

Code:

<ext:Viewport ID="Viewport1" runat="server" Layout="Border"> <Items> <ext:Panel runat="server" Region="Center"> <TopBar> <ext:Toolbar runat="server"> <Items> <ext:Button runat="server" Text="Button 1" Icon="Layout"></ext:Button> </Items> </ext:Toolbar> </TopBar> <LayoutConfig> <ext:HBoxLayoutConfig Align="Stretch" /> </LayoutConfig> <Items> <ext:FormPanel ID="LeftPanel" runat="server" Border="false" Header="false" Frame="true" Layout="VBoxLayout" Flex="1"> <LayoutConfig> <ext:VBoxLayoutConfig Align="Stretch" /> </LayoutConfig> <Items> <ext:GridPanel runat="server" ID="MainTable" Height="250" Padding="5" Frame="true" Title="Museum Component Information" MultiSelect="true" ButtonAlign="Right"> </ext:GridPanel> <ext:FormPanel runat="server" ID="HostDetails" Title="Museum Host Details" BodyPadding="10" AutoScroll="True" Frame="true" Flex="1"> </ext:FormPanel> </Items> </ext:FormPanel> <ext:FormPanel ID="RightPanel" runat="server" Layout="VBoxLayout" Flex="1"> <LayoutConfig> <ext:VBoxLayoutConfig Align="Stretch" /> </LayoutConfig> <Items> <ext:GridPanel ID="ProjectPanel" Padding="5" Frame="true" runat="server" AutoScroll="true" Height="200" Title="Museum Projects"> </ext:GridPanel> <ext:FormPanel runat="server" ID="ProjectForm" Title="Museum Project Details" ButtonAlign="Center" AutoScroll="True" BodyPadding="10" Split="true" Frame="true" Flex="1"> </ext:FormPanel> </Items> </ext:FormPanel> </Items> </ext:Panel> </Items> </ext:Viewport>

Quote:

Originally Posted by Baidaly

Hello!

Please, don't forget to wrap your code in CODE tag: http://forums.ext.net/showthread.php?3440

To add TopBar, you should set BorderLayout to Viewport and out inside it new Panel with your items:

Code:

<ext:Viewport ID="Viewport1" runat="server" Layout="Border"> <Items> <ext:Panel runat="server" Region="Center"> <TopBar> <ext:Toolbar runat="server"> <Items> <ext:Button runat="server" Text="Button 1" Icon="Layout"></ext:Button> </Items> </ext:Toolbar> </TopBar> <LayoutConfig> <ext:HBoxLayoutConfig Align="Stretch" /> </LayoutConfig> <Items> <ext:FormPanel ID="LeftPanel" runat="server" Border="false" Header="false" Frame="true" Layout="VBoxLayout" Flex="1"> <LayoutConfig> <ext:VBoxLayoutConfig Align="Stretch" /> </LayoutConfig> <Items> <ext:GridPanel runat="server" ID="MainTable" Height="250" Padding="5" Frame="true" Title="Museum Component Information" MultiSelect="true" ButtonAlign="Right"> </ext:GridPanel> <ext:FormPanel runat="server" ID="HostDetails" Title="Museum Host Details" BodyPadding="10" AutoScroll="True" Frame="true" Flex="1"> </ext:FormPanel> </Items> </ext:FormPanel> <ext:FormPanel ID="RightPanel" runat="server" Layout="VBoxLayout" Flex="1"> <LayoutConfig> <ext:VBoxLayoutConfig Align="Stretch" /> </LayoutConfig> <Items> <ext:GridPanel ID="ProjectPanel" Padding="5" Frame="true" runat="server" AutoScroll="true" Height="200" Title="Museum Projects"> </ext:GridPanel> <ext:FormPanel runat="server" ID="ProjectForm" Title="Museum Project Details" ButtonAlign="Center" AutoScroll="True" BodyPadding="10" Split="true" Frame="true" Flex="1"> </ext:FormPanel> </Items> </ext:FormPanel> </Items> </ext:Panel> </Items> </ext:Viewport>

Hi, It worked. Thanks !!