What's New?

[CLOSED] Layout School Part III: Why doesnt the UserControl show up

  1. #1
    May 19, 2011, 7:59 AM

    [CLOSED] Layout School Part III: Why doesnt the UserControl show up

    So, I am slowly building up my questions and examples towards my live project. This is a continuation of Part I and Part II of my "Layout school", so the examples below builds on answers and discussions in the previous ones.

    In this example I have the following structure:

    ASPX:
    <ext:Viewport>
    <ext:Panel>
        <ext:ComboBox>
    </ext:Panel>

    <ext:Panel>
        <CP:MyCustomUserControl>
    </ext:Panel>
</ext:ViewPort>
    MyCustomUserControl has the following structure:

    <ext:Viewport>
    <ext:FormPanel>
        <ext:FieldSet>...</ext:FieldSet>
    </ext:FormPanel>

    <ext:TabPanel>
        <ext:Panel>
            <ext:GridPanel>
        </ext:Panel>
        <ext:Panel>
            <ext:GridPanel>
        </ext:Panel>
    </ext:TabPanel>
</ext:ViewPort>
    Below is the code in full. The problem is that MyUserControl doesnt seem to show up at all and I dont really understand why. If I replace the <CP:MyCustomUserControl> with the entire TabPanel from the UserControl, then the TabPanel shows up. However, if I use the structure above but remove the FormPanel from the UserControl (ie the only thing that exists in the UserControl is <viewPort><tabPanel>) then it doesnt work either.

    I have played around with different Layouts and also replacing ViewPort in the USerControl with Panel, no difference really.

    Once again, thanks for looking at this.

    ASPX:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default3.aspx.cs" Inherits="WebApplicationExtNetTest.Test.Default3" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register TagPrefix="CP" TagName="MyUserControl" Src="MyUserControl.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />

    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="test1" />
                    <ext:RecordField Name="test2" />
                    <ext:RecordField Name="test3" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>

    <ext:Viewport ID="Viewport1" runat="server" Layout="VBoxLayout">
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Stretch" />
        </LayoutConfig> 
        <Items>

            <ext:Panel ID="Panel1" runat="server" Height="55" Layout="FitLayout">
                <Items>
                    <ext:ComboBox ID="ComboBox1" runat="server" EmptyText="TestComboBox" Icon="User" DisplayField="CustomerName" ValueField="CustomerId" >
                        <Items>
                            <ext:ListItem Text="Test 1" Value="1" />
                            <ext:ListItem Text="Test 2" Value="2" />
                            <ext:ListItem Text="Test 3" Value="3" />
                            <ext:ListItem Text="Test 4" Value="4" />
                        </Items>
                    </ext:ComboBox>
                </Items>
                <BottomBar>
                    <ext:Toolbar ID="Toolbar3" runat="server">
                        <Items>
                            <ext:Button ID="Button1" runat="server" Icon="Add" Text="Create"></ext:Button>
                            <ext:ToolbarFill ID="ToolbarFill2" runat="server" />
                            <ext:Button ID="Button2" runat="server" Icon="ArrowRefresh" Text="Refresh"></ext:Button>
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:Panel>

            <ext:Panel ID="Panel2" runat="server" Layout="FitLayout" Flex="1">
                <Content>
                    <CP:MyUserControl runat="server" />
                </Content>
            </ext:Panel>

         </Items>
    </ext:Viewport>


    </form>
</body>
</html>
    ASCX:

    <%@ Control Language="C#" ClassName="MyUserControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
  

<ext:ViewPort ID="ViewPort1" runat="server" Layout="VBoxLayout">
    <LayoutConfig>
        <ext:VBoxLayoutConfig Align="Stretch" />
    </LayoutConfig>
    <Items>

        <ext:FormPanel ID="Customer_FormPanel_Customer1" runat="server" Layout="FitLayout" Flex="1" Title="Info" Header="true" Padding="5">
            <BottomBar runat="server">
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="btnSave" Icon="Disk" Text="Save" runat="server" ></ext:Button>
                    </Items>
                </ext:Toolbar>
            </BottomBar>
            <Items>
                <ext:FieldSet ID="FieldSet1" runat="server" Title="Many fields" Layout="Form">
                    <Items>
                        <ext:CompositeField ID="CompositeField_Customer8" runat="server" FieldLabel="One fields" AnchorHorizontal="100%">
                            <Items>
                                <ext:NumberField ID="test1" runat="server" Width="90"/>
                                <ext:TextField ID="test2" runat="server" Width="40" ReadOnly="true"/>
                            </Items>
                        </ext:CompositeField>
                    </Items>
                </ext:FieldSet>
            </Items>
        </ext:FormPanel>

        <ext:TabPanel ID="TabPanel1" runat="server" Flex="1">
            <Items>
                <ext:Panel ID="PanelL" runat="server" Title="L" Layout="FitLayout" Border="true">
                    <Items>
                        <ext:GridPanel ID="GridPanel_Customer1" runat="server" 
                            StripeRows="true"
                            Header="true"
                            Border="true"
                            AutoExpandColumn="Name">
                            <Store>
                                <ext:Store ID="StoreCL" runat="server" AutoDataBind="true" AutoLoad="true" IDMode="Explicit">
                                    <Reader>
                                        <ext:ArrayReader>
                                            <Fields>
                                                <ext:RecordField Name="Id" />
                                                <ext:RecordField Name="Name" />
                                                <ext:RecordField Name="ParentId" />
                                            </Fields>
                                        </ext:ArrayReader>
                                    </Reader>
                                </ext:Store>
                            </Store>

                            <TopBar>
                                <ext:Toolbar ID="ToolbarC2" runat="server">
                                    <Items>
                                        <ext:Button ID="ButtonL" runat="server" Icon="Add" Text="Create new"></ext:Button>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <ColumnModel ID="ColumnModelC3" runat="server" >
                                <Columns>
                                    <ext:Column ColumnID="Id" Header="ID" DataIndex="Id" Hidden="true" />
                                    <ext:Column DataIndex="Name" Header="Namn" />
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
                <ext:Panel ID="Panel2" runat="server" Title="TEst test" Layout="FitLayout" Flex="1">
                    <Items>
                         <ext:GridPanel ID="GridPanelQ" runat="server" 
                            StripeRows="true" Header="true" Border="true"  AutoHeight="true" 
                            AutoExpandColumn="Name">
                            <TopBar>
                                <ext:Toolbar ID="Toolbar2" runat="server">
                                    <Items>
                                        <ext:Button ID="Button1" runat="server" Icon="Add" Text="Create new">
                                        </ext:Button>
                                        <ext:ToolbarFill ID="ToolbarFill2" runat="server" />
                                        <ext:Button ID="ButtonQ" runat="server" Icon="ArrowRefresh" Text="Refresh">
                                        </ext:Button>
                                    </Items>
                           
                                </ext:Toolbar>
                            </TopBar>
                            <Store>
                                <ext:Store ID="StoreQ" runat="server" AutoDataBind="true" AutoLoad="true" IDMode="Explicit" >
                                    <Reader>
                                        <ext:ArrayReader>
                                            <Fields>
                                                <ext:RecordField Name="Id" />
                                                <ext:RecordField Name="Name" />
                                            </Fields>
                                        </ext:ArrayReader>
                                    </Reader>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="ColumnModel1" runat="server" >
                                <Columns>
                                    <ext:Column ColumnID="Id" Header="ID" DataIndex="Id" Hidden="true" />
                                    <ext:Column DataIndex="Name" Header="Name" />
                                </Columns>
                            </ColumnModel>

                            <BottomBar>
                                <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="4">
                                    <Items>
                                        <ext:Label ID="Label1" runat="server" Text="Size:" />
                                        <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                                        <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                                            <Items>
                                                <ext:ListItem Text="2" />
                                                <ext:ListItem Text="4" />
                                                <ext:ListItem Text="6" />
                                                <ext:ListItem Text="8" />
                                                <ext:ListItem Text="10" />
                                            </Items>
                                            <SelectedItem Value="4" />
                                        </ext:ComboBox>
                                    </Items>
                                </ext:PagingToolbar>
                            </BottomBar>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:TabPanel>
    </Items>
</ext:ViewPort>
    Last edited by Daniil; May 20, 2011 at 10:25 AM. Reason: [CLOSED]
  2. #2
    May 19, 2011, 12:07 PM
    Hi,

    The one issue in your code I can say right away: Viewport must be a single top level page's container. So, it's wrong to place it in a user control.
    http://dev.sencha.com/deploy/ext-3.3...s=Ext.Viewport
  3. #3
    May 19, 2011, 4:37 PM
    Well, I tried with Panel too, it made no difference.
  4. #4
    May 19, 2011, 4:40 PM
    Be sure it made difference:)

    Another issue is here:

    <ext:Panel ID="Panel2" runat="server" Layout="FitLayout" Flex="1">
    <Content>
        <CP:MyUserControl runat="server" />
    </Content>
</ext:Panel>
    Layout="FitLayout" doesn't make any sense. Please wrap the user control's conttent in <ext:FitLayout> control.
  5. #5
    May 19, 2011, 4:53 PM
    Quote Originally Posted by wagger View Post
    Well, I tried with Panel too, it made no difference.
    Removing the <ext:Viewport> appeared to make a big difference for me.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  6. #6
    May 19, 2011, 7:35 PM
    Quote Originally Posted by Daniil View Post
    Layout="FitLayout" doesn't make any sense. Please wrap the user control's conttent in <ext:FitLayout> control.
    This is a prime example of the difficulty with layout in ext.net.

    Why on earth wouldnt a Panel with FitLayout work? What is the difference between a Panel with FitLayout and <ext:FitLayout>? Why do you sometimes recommend <ext:Panel Layout="FitLayout"> and sometimes "it doesnt makes sense"?
  7. #7
    May 19, 2011, 7:42 PM
    Quote Originally Posted by geoffrey.mcgill View Post
    Removing the <ext:Viewport> appeared to make a big difference for me.
    Not for me. Are we talking about the same thing? I replace the ViewPort in the UserControl with a Panel, that didnt help.Click image for larger version.  Name: delme.png  Views: 157  Size: 30.9 KB  ID: 2748



    here is the code again. Exactly the same as before except for that ViewPort-->GridPanel in the UserControl.


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default3.aspx.cs" Inherits="WebApplicationExtNetTest.Test.Default3" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register TagPrefix="CP" TagName="MyUserControl" Src="MyUserControl.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />

    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="test1" />
                    <ext:RecordField Name="test2" />
                    <ext:RecordField Name="test3" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>

    <ext:Viewport ID="Viewport1" runat="server" Layout="VBoxLayout">
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Stretch" />
        </LayoutConfig> 
        <Items>

            <ext:Panel ID="Panel1" runat="server" Height="55" Layout="FitLayout">
                <Items>
                    <ext:ComboBox ID="ComboBox1" runat="server" EmptyText="TestComboBox" Icon="User" DisplayField="CustomerName" ValueField="CustomerId" >
                        <Items>
                            <ext:ListItem Text="Test 1" Value="1" />
                            <ext:ListItem Text="Test 2" Value="2" />
                            <ext:ListItem Text="Test 3" Value="3" />
                            <ext:ListItem Text="Test 4" Value="4" />
                        </Items>
                    </ext:ComboBox>
                </Items>
                <BottomBar>
                    <ext:Toolbar ID="Toolbar3" runat="server">
                        <Items>
                            <ext:Button ID="Button1" runat="server" Icon="Add" Text="Create"></ext:Button>
                            <ext:ToolbarFill ID="ToolbarFill2" runat="server" />
                            <ext:Button ID="Button2" runat="server" Icon="ArrowRefresh" Text="Refresh"></ext:Button>
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:Panel>

            <ext:Panel ID="Panel2" runat="server" Layout="FitLayout" Flex="1">
                <Content>
                    <CP:MyUserControl runat="server" />
                </Content>
            </ext:Panel>

         </Items>
    </ext:Viewport>
    </form>
</body>
</html>

    MyUserControl
    <%@ Control Language="C#" ClassName="MyUserControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
  

<ext:Panel ID="ViewPort1" runat="server" Layout="VBoxLayout">
    <LayoutConfig>
        <ext:VBoxLayoutConfig Align="Stretch" />
    </LayoutConfig>
    <Items>

        <ext:FormPanel ID="Customer_FormPanel_Customer1" runat="server" Layout="FitLayout" Flex="1" Title="Info" Header="true" Padding="5">
            <BottomBar runat="server">
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="btnSave" Icon="Disk" Text="Save" runat="server" ></ext:Button>
                    </Items>
                </ext:Toolbar>
            </BottomBar>
            <Items>
                <ext:FieldSet ID="FieldSet1" runat="server" Title="Many fields" Layout="Form">
                    <Items>
                        <ext:CompositeField ID="CompositeField_Customer8" runat="server" FieldLabel="One fields" AnchorHorizontal="100%">
                            <Items>
                                <ext:NumberField ID="test1" runat="server" Width="90"/>
                                <ext:TextField ID="test2" runat="server" Width="40" ReadOnly="true"/>
                            </Items>
                        </ext:CompositeField>
                    </Items>
                </ext:FieldSet>
            </Items>
        </ext:FormPanel>

        <ext:TabPanel ID="TabPanel1" runat="server" Flex="1">
            <Items>
                <ext:Panel ID="PanelL" runat="server" Title="L" Layout="FitLayout" Border="true">
                    <Items>
                        <ext:GridPanel ID="GridPanel_Customer1" runat="server" 
                            StripeRows="true"
                            Header="true"
                            Border="true"
                            AutoExpandColumn="Name">
                            <Store>
                                <ext:Store ID="StoreCL" runat="server" AutoDataBind="true" AutoLoad="true" IDMode="Explicit">
                                    <Reader>
                                        <ext:ArrayReader>
                                            <Fields>
                                                <ext:RecordField Name="Id" />
                                                <ext:RecordField Name="Name" />
                                                <ext:RecordField Name="ParentId" />
                                            </Fields>
                                        </ext:ArrayReader>
                                    </Reader>
                                </ext:Store>
                            </Store>

                            <TopBar>
                                <ext:Toolbar ID="ToolbarC2" runat="server">
                                    <Items>
                                        <ext:Button ID="ButtonL" runat="server" Icon="Add" Text="Create new"></ext:Button>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <ColumnModel ID="ColumnModelC3" runat="server" >
                                <Columns>
                                    <ext:Column ColumnID="Id" Header="ID" DataIndex="Id" Hidden="true" />
                                    <ext:Column DataIndex="Name" Header="Namn" />
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
                <ext:Panel ID="Panel2" runat="server" Title="TEst test" Layout="FitLayout" Flex="1">
                    <Items>
                         <ext:GridPanel ID="GridPanelQ" runat="server" 
                            StripeRows="true" Header="true" Border="true"  AutoHeight="true" 
                            AutoExpandColumn="Name">
                            <TopBar>
                                <ext:Toolbar ID="Toolbar2" runat="server">
                                    <Items>
                                        <ext:Button ID="Button1" runat="server" Icon="Add" Text="Create new">
                                        </ext:Button>
                                        <ext:ToolbarFill ID="ToolbarFill2" runat="server" />
                                        <ext:Button ID="ButtonQ" runat="server" Icon="ArrowRefresh" Text="Refresh">
                                        </ext:Button>
                                    </Items>
                           
                                </ext:Toolbar>
                            </TopBar>
                            <Store>
                                <ext:Store ID="StoreQ" runat="server" AutoDataBind="true" AutoLoad="true" IDMode="Explicit" >
                                    <Reader>
                                        <ext:ArrayReader>
                                            <Fields>
                                                <ext:RecordField Name="Id" />
                                                <ext:RecordField Name="Name" />
                                            </Fields>
                                        </ext:ArrayReader>
                                    </Reader>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="ColumnModel1" runat="server" >
                                <Columns>
                                    <ext:Column ColumnID="Id" Header="ID" DataIndex="Id" Hidden="true" />
                                    <ext:Column DataIndex="Name" Header="Name" />
                                </Columns>
                            </ColumnModel>

                            <BottomBar>
                                <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="4">
                                    <Items>
                                        <ext:Label ID="Label1" runat="server" Text="Size:" />
                                        <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                                        <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                                            <Items>
                                                <ext:ListItem Text="2" />
                                                <ext:ListItem Text="4" />
                                                <ext:ListItem Text="6" />
                                                <ext:ListItem Text="8" />
                                                <ext:ListItem Text="10" />
                                            </Items>
                                            <SelectedItem Value="4" />
                                        </ext:ComboBox>
                                    </Items>
                                </ext:PagingToolbar>
                            </BottomBar>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:TabPanel>
    </Items>
</ext:Panel>
  8. #8
    May 19, 2011, 8:37 PM
    Quote Originally Posted by wagger View Post
    This is a prime example of the difficulty with layout in ext.net.

    Why on earth wouldnt a Panel with FitLayout work? What is the difference between a Panel with FitLayout and <ext:FitLayout>? Why do you sometimes recommend <ext:Panel Layout="FitLayout"> and sometimes "it doesnt makes sense"?
    1. The .Layout property of the Container is ignored during rendering when you add "stuff" to its <Content> region.

    2. If you add a UserControl to the <Content> region, the stuff in the UserControl is rendered just to the body of its parent Container. No Layout is applied to any of the stuff in the <Content>. EXCEPT...

    3. EXCEPT... when the UserControl contains a Layout Control. If the top level Control within the UserControl is a Layout Control (such as <ext:FitLayout>), the UserControl will then apply this Layout to its Parent Container. All Components within the Layout Control will then be rendered as if they were added to the <Items> Collection of the Parent Container with a .Layout set.

    4. In your sample, you are not seeing anything because you do not set any type of .Height for <ext:Panel ID="ViewPort1">. This Panel is also not controlled by a Layout. In my post above I mentioned I removed the <ext:Viewport>. You changed the Viewport to a Panel.

    Here is your code sample with the required revisions.

    Example (.aspx)

    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<%@ Register TagPrefix="CP" TagName="MyUserControl" Src="Child.ascx" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
 
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="test1" />
                        <ext:RecordField Name="test2" />
                        <ext:RecordField Name="test3" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
 
        <ext:Viewport ID="Viewport1" runat="server" Layout="VBoxLayout">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig> 
            <Items>
                <ext:Panel ID="Panel1" runat="server" Height="55" Layout="FitLayout">
                    <Items>
                        <ext:ComboBox ID="ComboBox1" runat="server" EmptyText="TestComboBox" Icon="User" DisplayField="CustomerName" ValueField="CustomerId" >
                            <Items>
                                <ext:ListItem Text="Test 1" Value="1" />
                                <ext:ListItem Text="Test 2" Value="2" />
                                <ext:ListItem Text="Test 3" Value="3" />
                                <ext:ListItem Text="Test 4" Value="4" />
                            </Items>
                        </ext:ComboBox>
                    </Items>
                    <BottomBar>
                        <ext:Toolbar ID="Toolbar3" runat="server">
                            <Items>
                                <ext:Button ID="Button1" runat="server" Icon="Add" Text="Create" />
                                <ext:ToolbarFill ID="ToolbarFill2" runat="server" />
                                <ext:Button ID="Button2" runat="server" Icon="ArrowRefresh" Text="Refresh" />
                            </Items>
                        </ext:Toolbar>
                    </BottomBar>
                </ext:Panel>
                <ext:Panel ID="Panel2" runat="server" Flex="1">
                    <Content>
                        <CP:MyUserControl runat="server" />
                    </Content>
                </ext:Panel>
             </Items>
        </ext:Viewport>
    </form>
</body>
</html>
    Example (.ascx)

    <%@ Control Language="C#" ClassName="MyUserControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:FitLayout runat="server">
    <Items>
        <ext:Panel ID="ViewPort1" runat="server" Layout="VBoxLayout">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>
            <Items>
                <ext:FormPanel ID="Customer_FormPanel_Customer1" runat="server" Layout="FitLayout" Flex="1" Title="Info" Header="true" Padding="5">
                    <BottomBar runat="server">
                        <ext:Toolbar ID="Toolbar1" runat="server">
                            <Items>
                                <ext:Button ID="btnSave" Icon="Disk" Text="Save" runat="server" />
                            </Items>
                        </ext:Toolbar>
                    </BottomBar>
                    <Items>
                        <ext:FieldSet ID="FieldSet1" runat="server" Title="Many fields" Layout="Form">
                            <Items>
                                <ext:CompositeField ID="CompositeField_Customer8" runat="server" FieldLabel="One fields" AnchorHorizontal="100%">
                                    <Items>
                                        <ext:NumberField ID="test1" runat="server" Width="90"/>
                                        <ext:TextField ID="test2" runat="server" Width="40" ReadOnly="true"/>
                                    </Items>
                                </ext:CompositeField>
                            </Items>
                        </ext:FieldSet>
                    </Items>
                </ext:FormPanel>
 
                <ext:TabPanel ID="TabPanel1" runat="server" Flex="1">
                    <Items>
                        <ext:Panel ID="PanelL" runat="server" Title="L" Layout="FitLayout" Border="true">
                            <Items>
                                <ext:GridPanel ID="GridPanel_Customer1" runat="server"
                                    StripeRows="true"
                                    Header="true"
                                    Border="true"
                                    AutoExpandColumn="Name">
                                    <Store>
                                        <ext:Store ID="StoreCL" runat="server" AutoDataBind="true" AutoLoad="true" IDMode="Explicit">
                                            <Reader>
                                                <ext:ArrayReader>
                                                    <Fields>
                                                        <ext:RecordField Name="Id" />
                                                        <ext:RecordField Name="Name" />
                                                        <ext:RecordField Name="ParentId" />
                                                    </Fields>
                                                </ext:ArrayReader>
                                            </Reader>
                                        </ext:Store>
                                    </Store>
 
                                    <TopBar>
                                        <ext:Toolbar ID="ToolbarC2" runat="server">
                                            <Items>
                                                <ext:Button ID="ButtonL" runat="server" Icon="Add" Text="Create new" />
                                            </Items>
                                        </ext:Toolbar>
                                    </TopBar>
                                    <ColumnModel ID="ColumnModelC3" runat="server" >
                                        <Columns>
                                            <ext:Column ColumnID="Id" Header="ID" DataIndex="Id" Hidden="true" />
                                            <ext:Column DataIndex="Name" Header="Namn" />
                                        </Columns>
                                    </ColumnModel>
                                </ext:GridPanel>
                            </Items>
                        </ext:Panel>
                        <ext:Panel ID="Panel2" runat="server" Title="TEst test" Layout="FitLayout" Flex="1">
                            <Items>
                                 <ext:GridPanel ID="GridPanelQ" runat="server"
                                    StripeRows="true" Header="true" Border="true"  AutoHeight="true"
                                    AutoExpandColumn="Name">
                                    <TopBar>
                                        <ext:Toolbar ID="Toolbar2" runat="server">
                                            <Items>
                                                <ext:Button ID="Button1" runat="server" Icon="Add" Text="Create new">
                                                </ext:Button>
                                                <ext:ToolbarFill ID="ToolbarFill2" runat="server" />
                                                <ext:Button ID="ButtonQ" runat="server" Icon="ArrowRefresh" Text="Refresh">
                                                </ext:Button>
                                            </Items>
                            
                                        </ext:Toolbar>
                                    </TopBar>
                                    <Store>
                                        <ext:Store ID="StoreQ" runat="server" AutoDataBind="true" AutoLoad="true" IDMode="Explicit" >
                                            <Reader>
                                                <ext:ArrayReader>
                                                    <Fields>
                                                        <ext:RecordField Name="Id" />
                                                        <ext:RecordField Name="Name" />
                                                    </Fields>
                                                </ext:ArrayReader>
                                            </Reader>
                                        </ext:Store>
                                    </Store>
                                    <ColumnModel ID="ColumnModel1" runat="server" >
                                        <Columns>
                                            <ext:Column ColumnID="Id" Header="ID" DataIndex="Id" Hidden="true" />
                                            <ext:Column DataIndex="Name" Header="Name" />
                                        </Columns>
                                    </ColumnModel>
 
                                    <BottomBar>
                                        <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="4">
                                            <Items>
                                                <ext:Label ID="Label1" runat="server" Text="Size:" />
                                                <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                                                <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                                                    <Items>
                                                        <ext:ListItem Text="2" />
                                                        <ext:ListItem Text="4" />
                                                        <ext:ListItem Text="6" />
                                                        <ext:ListItem Text="8" />
                                                        <ext:ListItem Text="10" />
                                                    </Items>
                                                    <SelectedItem Value="4" />
                                                </ext:ComboBox>
                                            </Items>
                                        </ext:PagingToolbar>
                                    </BottomBar>
                                </ext:GridPanel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Panel>
    </Items>
</ext:FitLayout>
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  9. #9
    May 20, 2011, 8:10 AM
    Thanks Geoffrey, now its finally starting to look like something =)

    I will continue with these new infromation and details that y'all provided and see where it leads me, but there will most likely be a part IV of the layout school =)

    regards

Similar Threads

  1. [CLOSED] Combobox. show items with part of string instead of only from left to right..
    By CarWise in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 12, 2012, 2:06 PM
  2. [CLOSED] Ext.Msg.confirm Doesnt show modally on TabChange
    By ilanga in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 21, 2011, 8:01 PM
  3. [CLOSED] Layout School Part II: Three items inside ViewPort (with nested items)
    By wagger in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: May 19, 2011, 7:43 AM
  4. [CLOSED] Layout School Part I: GridPanels inside a TabPanel inside a ViewPort
    By wagger in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 18, 2011, 7:06 PM
  5. [CLOSED] Usercontrol inside a form layout
    By jchau in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 03, 2008, 1:57 PM

Tags for this Thread

Posting Permissions