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>

原文链接：http://blog.sina.com.cn/s/blog_63ad39d00100kdka.html