[CLOSED] Layout Issue in form

[Sowjanya]

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]

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]

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