Add more than one item in LayoutColumn in Ext.net

Question

I am trying to create 2 different columns, and within each column I want to have multiple items. For instance a ComboBox, and 2 DateFields in one column.

I publish the code, and it gives me and error when I try to run it saying "Only one Component allowed in this Collection"

<body>
<form id="MetricsForm" runat="server">
<ext:ResourceManager ID="MetricsManager" runat="server" />
    <ext:Viewport ID="MetricsViewPort" runat="server"></ext:Viewport>
    <asp:SqlDataSource ID="DMSSQL2DataSource" runat="server" ConnectionString="" />
    <asp:SqlDataSource ID="LocalDataSource" runat="server" ConnectionString="" />
    <ext:TabPanel ID="TabPanel" runat="server">
        <Items>
            <ext:Panel runat="server" Title="Step 1" ID="Tab1">
                <Items>
                    <ext:Panel ID="Panel1" 
                        runat="server" 
                        Title="Step 1: Choose date span and set spans" 
                        Region="North"
                        Height="200" 
                        Width="475"
                        MinWidth="225" 
                        MaxWidth="475">

                        <Items>
                            <ext:Container runat="server" Layout="RowLayout" Height="200" >
                                <Items>
                                    <ext:ColumnLayout runat="server" ID="MetricsColumnLayout">
                                        <Columns>
                                            <ext:LayoutColumn ColumnWidth="0.5">
                                                <ext:RadioGroup  runat="server" ID="ChooseSpan" Selectable="true" ColumnsNumber="1" >
                                                    <Items>
                                                        <ext:Radio ID="RadioAll" runat="server" BoxLabel="Show All" InputValue="0" />
                                                        <ext:Radio ID="RadioMonth" runat="server" BoxLabel="Choose Date Range(By Month)" InputValue="1" />
                                                        <ext:Radio ID="RadioDate" runat="server" BoxLabel="Choose Date Range(By Dates)" InputValue="2" />
                                                    </Items>
                                                </ext:RadioGroup>
                                            </ext:LayoutColumn>
                                             <ext:LayoutColumn ColumnWidth="0.5">
                                                <ext:ComboBox runat="server" ID="MonthComboBox" Selectable="true" SelectedIndex="0" StyleSpec="margin-bottom:4px;" Width="200" >
                                                    <Items>
                                                        <ext:ListItem Text="Any Month" Value="0" />
                                                        <ext:ListItem Text="January" Value="1" />   
                                                        <ext:ListItem Text="February" Value="2" />
                                                        <ext:ListItem Text="March" Value="3" />
                                                        <ext:ListItem Text="April" Value="4" />
                                                        <ext:ListItem Text="May" Value="5" />
                                                        <ext:ListItem Text="June" Value="6" />
                                                        <ext:ListItem Text="July" Value="7" />
                                                        <ext:ListItem Text="August" Value="8" />
                                                        <ext:ListItem Text="September" Value="9" />
                                                        <ext:ListItem Text="October" Value="10" />
                                                        <ext:ListItem Text="November" Value="11" />
                                                        <ext:ListItem Text="December" Value="12" />
                                                    </Items>
                                                </ext:ComboBox>
                                                <ext:DateField
                                                    ID="StartDateField"
                                                    runat="server"
                                                    FieldLabel="Start"
                                                    Vtype="daterange"
                                                    AnchorHorizontal="100%"
                                                    EnableKeyEvents="true"
                                                    Width="200">
                                                    <CustomConfig>
                                                        <ext:ConfigItem Name="endDateField" Value="#{EndDateField}" Mode="Value" />
                                                    </CustomConfig>
                                                    <Listeners>
                                                    </Listeners>
                                                </ext:DateField>

                                                <ext:DateField 
                                                    ID="EndDateField" 
                                                    runat="server" 
                                                    Vtype="daterange"
                                                    FieldLabel="End"
                                                    AnchorHorizontal="100%"
                                                    EnableKeyEvents="true"
                                                    Width="200">
                                                    <CustomConfig>
                                                        <ext:ConfigItem Name="startDateField" Value="#{StartDateField}" Mode="Value" />
                                                    </CustomConfig>
                                                    <Listeners>
                                                    </Listeners>
                                                </ext:DateField>
                                            </ext:LayoutColumn>
                                        </Columns>
                                    </ext:ColumnLayout>
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Panel>
                </Items>

            </ext:Panel>
            <ext:Panel runat="server" Title="Step 2" ID="Tab2">

            </ext:Panel>
        </Items>
    </ext:TabPanel> 
<div>

</div>
</form>

Are you using `Master Page(s)`? if not can't you accomplish the same thing using `
'some content...

'some content...
` — MethodMan, Apr 01 '13 at 20:40

score 1 · Answer 1 · answered Apr 02 '13 at 02:42

I'm not 100% sure what layout you are trying to configure, but it would be best to avoid using the Layout Controls as they have been removed from Ext.NET 2. You can use the .Layout property.

The following sample demonstrates replacing the Layout control with .Layout property.

Example

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

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">   
        <ext:ResourceManager runat="server" />

        <ext:TabPanel runat="server">
            <Items>
                <ext:Panel runat="server" Title="Step 1">
                    <Items>
                        <ext:Panel
                            runat="server" 
                            Title="Step 1: Choose date span and set spans" 
                            Region="North"
                            Height="200" 
                            Width="475"
                            MinWidth="225" 
                            MaxWidth="475">
                            <Items>
                                <ext:Container runat="server" Layout="ColumnLayout" Height="200">
                                    <Items>
                                        <ext:RadioGroup runat="server" Selectable="true" ColumnsNumber="1" >
                                            <Items>
                                                <ext:Radio runat="server" BoxLabel="Show All" InputValue="0" />
                                                <ext:Radio runat="server" BoxLabel="Choose Date Range(By Month)" InputValue="1" />
                                                <ext:Radio runat="server" BoxLabel="Choose Date Range(By Dates)" InputValue="2" />
                                            </Items>
                                        </ext:RadioGroup>
                                        <ext:ComboBox 
                                            runat="server" 
                                            Selectable="true" 
                                            SelectedIndex="0" 
                                            StyleSpec="margin-bottom:4px;" 
                                            Width="200">
                                            <Items>
                                                <ext:ListItem Text="Any Month" Value="0" />
                                                <ext:ListItem Text="January" Value="1" />   
                                                <ext:ListItem Text="February" Value="2" />
                                                <ext:ListItem Text="March" Value="3" />
                                                <ext:ListItem Text="April" Value="4" />
                                                <ext:ListItem Text="May" Value="5" />
                                                <ext:ListItem Text="June" Value="6" />
                                                <ext:ListItem Text="July" Value="7" />
                                                <ext:ListItem Text="August" Value="8" />
                                                <ext:ListItem Text="September" Value="9" />
                                                <ext:ListItem Text="October" Value="10" />
                                                <ext:ListItem Text="November" Value="11" />
                                                <ext:ListItem Text="December" Value="12" />
                                            </Items>
                                        </ext:ComboBox>
                                        <ext:DateField
                                            runat="server"
                                            FieldLabel="Start"
                                            AnchorHorizontal="100%"
                                            EnableKeyEvents="true"
                                            Width="200"
                                            />
                                        <ext:DateField 
                                            runat="server" 
                                            FieldLabel="End"
                                            AnchorHorizontal="100%"
                                            EnableKeyEvents="true"
                                            Width="200"
                                            />
                                    </Items>
                                </ext:Container>
                            </Items>
                        </ext:Panel>
                    </Items>

                </ext:Panel>
                <ext:Panel runat="server" Title="Step 2"/>
            </Items>
        </ext:TabPanel> 
    </form>
</body>
</html>

what I am trying to achieve is the RadioGroup in the first column, and the ComboBox and 2 DateFields in the second column. Will this achieve this? — webminer07, Apr 02 '13 at 13:44

score 0 · Accepted Answer · answered Apr 03 '13 at 09:33

Just wrap the things in a Container.

<ext:Container 
    runat="server" 
    Width="600" 
    Height="300" 
    Layout="ColumnLayout">
    <Items>
        <ext:RadioGroup runat="server" ColumnWidth="0.5">
            <Items>
                <ext:Radio runat="server" BoxLabel="1" />
                <ext:Radio runat="server" BoxLabel="2" />
            </Items>
        </ext:RadioGroup>
        <ext:Container runat="server" ColumnWidth="0.5">
            <Items>
                <ext:ComboBox runat="server" />
                <ext:DateField runat="server" />
                <ext:DateField runat="server" />
            </Items>
        </ext:Container>
    </Items>
</ext:Container>

exactly what i needed. now i fully understand how containers work! thanks so much — webminer07, Apr 03 '13 at 13:46

Add more than one item in LayoutColumn in Ext.net

2 Answers2