现在的位置: 首页 > 综合 > 正文

Ext.NET控件介绍—Form控件

2012年02月18日 ⁄ 综合 ⁄ 共 4860字 ⁄ 字号 评论关闭

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>
【上篇】
【下篇】

抱歉!评论已关闭.