在Ext.net的LayoutColumn中添加多个项目

时间:2013-04-01 20:38:00

标签: c# html layout formatting ext.net

我正在尝试创建2个不同的列,并且在每个列中我想要有多个项目。例如,ComboBox和一列中的2个DateField。

我发布了代码,当我尝试运行它并说“此集合中只允许一个组件”时,它会给我和错误

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

2 个答案:

答案 0 :(得分:1)

我不是100%确定您要配置的布局,但最好避免使用布局控件,因为它们已从Ext.NET 2中删除。您可以使用.Layout属性。

以下示例演示如何使用.Layout属性替换Layout控件。

示例

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

答案 1 :(得分:0)

将东西包装在容器中。

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