PDA

View Full Version : [CLOSED] Layout Issue in form



Sowjanya
Aug 01, 2013, 4:25 PM
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 ?



<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

Baidaly
Aug 02, 2013, 12:44 AM
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:



<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>

Sowjanya
Aug 12, 2013, 5:44 PM
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:



<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 !!