我正在尝试创建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>
答案 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>