Ext.NET控件介绍—Form控件
Form控件
表单控件是每个开发人员最常用到的一些控件，包括TextField、DateField、FormPanel、Label、HyperLink、Multifield、SpinnerField等。Ext.NET的Form控件集成很多ASP.NET控件不具备的功能，使用相当方便，接下来我们来一一介绍。
-
TextField控件
TextFiled控件等同于ASP.NET里的 TextBox控件，主要进行文字数据录入或显示。TextFiled控件的使用方法相当简单，这里只对它的一些特定属性做一些介绍:
EmptyText属性：用来设置或获取显示输入数据提示信息。
Note属性：用来设置或获取静态描述信息，并可以通过 NoteAlign属性设置信息的显示位置。
FieldLabel属性：相当于设置TextField的Label标签，用户描述TextField内容。
InputType属性：将该值设为Password文本框会以密码格式显示。
TextField还提供了CustomConfig可以用来设置输入验证，如验证输入的两次密码是否相同。
<ext:TextField
ID="PasswordField"
runat="server"
FieldLabel="Password"
InputType="Password"
Width="175">
</ext:TextField>
<ext:TextField
runat="server"
Vtype="password"
FieldLabel="Confirm Password"
InputType="Password"
MsgTarget="Side"
Width="175">
<CustomConfig>
<ext:ConfigItem Name="initialPassField" Value="#{PasswordField}" Mode="Value" />
</CustomConfig>
</ext:TextField>
-
DateField控件
DateField是一个带日历选择项的文本框，这个控件作用比较大，很多地方都用得到。直接通过其SelectedData属性得到所选择的日期。也可以通过设置CustomConfig来实现一段时间范围的日期选择。效果如下：
<ext:DateField
runat="server"
ID="FromDate"
Vtype="daterange"
FieldLabel="To"
AnchorHorizontal="100%">
<CustomConfig>
<ext:ConfigItem Name="endDateField" Value="#{ToDate}" Mode="Value" />
</CustomConfig>
</ext:DateField>
<ext:DateField
runat="server"
ID="ToDate"
Vtype="daterange"
FieldLabel="From"
AnchorHorizontal="100%">
<CustomConfig>
<ext:ConfigItem Name="startDateField" Value="#{FromDate}" Mode="Value" />
</CustomConfig>
</ext:DateField>
注：通过Vtype属性可以设置验证方式。
-
Multifield控件
在页面中我们常会使用到需要多个文本框组合而成的输入控件，如电话（包括国家号码、区号）、IP地址、组合验证码等。Ext.NET中提供了Multifield来实现这种功能。效果如下：
<ext:MultiField runat="server" FieldLabel="IP Address">
<Fields>
<ext:NumberField runat="server" Width="40" />
<ext:Label runat="server" Text="." Cls="dot-label" />
<ext:NumberField runat="server" Width="40" />
<ext:Label runat="server" Text="." Cls="dot-label" />
<ext:NumberField runat="server" Width="40" />
<ext:Label runat="server" Text="." Cls="dot-label" />
<ext:NumberField runat="server" Width="40" />
</Fields>
</ext:MultiField>
此处使用的NumberField控件只能输入数字。
可以设置MultiField的Note属性来设置对组合文本框的描述信息。
-
SpinnerField控件
带微调控制器的文本控件。是Ext.NET1.0版本新的控件，此处简单介绍一下。
<ext:SpinnerField ID="SpinnerField1" runat="server" FieldLabel="Age" />
<ext:SpinnerField
ID="SpinnerField2"
runat="server"
FieldLabel="Test"
MinValue="0"
MaxValue="100"
AllowDecimals="true"
DecimalPrecision="1"
IncrementValue="0.4"
Accelerate="true"
AlternateIncrementValue="2.1"
/>
IncrementValue属性：可以设置每次递增量。
DecimalPrecision属性：可以设置精确位数。
-
TimeField控件
TimeField可以通过下拉框来选择时间，效果如下：
<ext:TimeField ID="TimeField2" runat="server" MinTime="9:00" MaxTime="18:00" Increment="30" SelectedTime="09:00" Format="H:mm" />
注：MinTime属性：可以设置可选时间最小值。
MaxTime属性：设置可选时间最大值。
Increment属性：可以设置每段时间的递增量。
Format属性：设置时间显示的格式。
-
FormPanel控件
FormPanel继承于Panel类，不用之处在与panel只是作为一个容器使用，而FormPanel可以实现表单提交的功能，例如表单输入验证就需要使用FormPanel控件来实现。效果如下：
设置FormPanel的监听事件Listeners实现表单的客户端输入验证，验证通过后才能提交表单。
<Listeners>
<ClientValidation Handler="el.getBottomToolbar().setStatus({text : valid ? 'Form is valid' : 'Form is invalid', iconCls: valid ? 'icon-accept' : 'icon-exclamation'});" />
</Listeners>
-
ComboBox控件
ComboBox 控件的基本功能和.NET标准控件的DropDownList控件相同，不同之处在于DropDownList只能选择，不能进行编辑录入，如果用户需要一个既可手工输入又可以选择的功能来做条件筛选，DropDownList则实现不了，Ext.NET正好弥补上了DropDownList的不足。下面是一个简单的示例：
<ext:ComboBox
runat="server"
StoreID="Store1"
Editable="true"
DisplayField="state"
ValueField="abbr"
TypeAhead="true"
Mode="Local"
ForceSelection="true"
TriggerAction="All"
EmptyText="Select a state..."
SelectOnFocus="true">
<SelectedItem Value="ID" />
</ext:ComboBox>
