Ext.NET控件介绍—Form控件

[b]Form控件[/b]

表单控件是每个开发人员最常用到的一些控件，包括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来实现一段时间范围的日期选择。效果如下：

[b]

[/b]

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