Ext. Net Control introduction-Form Control

Form Control

Form Controls are the most commonly used controls for developers, including textfield, datefield, formpanel, label, hyperlink, multifield, and spinnerfield. The Form Control of Ext. NET integrates many functions not available in ASP. NET controls, which is quite convenient to use. Next we will introduce them one by one.

 

• TextfieldWidget

The textfiled control is equivalent to the Textbox Control in ASP. NET, mainly used for text data input or display. The usage of the textfiled control is quite simple. Here we will only introduce some of its specific attributes:

Emptytext attribute: Used to set or obtain the prompt information of the displayed input data.

Note attribute: This attribute is used to set or obtain static description information. You can use the notealign attribute to set the display position of information.

Fieldlabel attribute: It is equivalent to setting the label Label of textfield. You can describe the content of textfield.

Inputtype attribute: set this value to the Password text box and display it in password format.

Textfield also provides customconfig, which can be used to set the input verification, for example, to verify whether the two passwords entered are the same.

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

• DatefieldWidget

Datefield is a text box with calendar selection items. This control has a large role and can be used in many places. The selected date is obtained directly through its selecteddata attribute. You can also set customconfig to set a date range for a period of time. The effect is as follows:

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

Note: You can set the verification method through the vtype attribute.

 

• MultifieldWidget 

On the page, we usually use an input control consisting of multiple text boxes, such as a phone number (including a country number or area code), an IP address, and a combined verification code. Ext. NET provides multifield to implement this function. The effect is as follows:

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

The numberfield control used here can only enter numbers.

You can set the note attribute of multifield to set the description of the combined text box.

 

• SpinnerfieldWidget 

Text control with fine-tuning controller. It is a new control of Ext. net1.0. Here is a brief introduction.

  

<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 attribute: You can set the incremental volume each time.

Decimalprecision attribute: You can set the exact number of digits.

 

• TimefieldWidget

Timefield can be selected from the drop-down list. The effect is as follows:

<Ext: timefield id = "timefield2" runat = "server" mintime = "9:00" maxtime = "18:00" increment = "30" selectedtime = "09:00" format = "h: MM "/> 

Note: mintime attribute: You can set the minimum value of the optional time.

Maxtime attribute: sets the maximum value of the optional time.

Increment attribute: You can set the increment for each period of time.

Format attribute: set the time display format.

 

• FormpanelWidget 

Formpanel inherits from the Panel class and does not need to be used as a container. formpanel can implement the form submission function. For example, to verify the form input, you need to use the formpanel control. The effect is as follows:

Set the listeners listener of formpanel to implement form input and verification on the client side. The form can be submitted only after the verification is passed.

<Listeners>

<ClientValidation Handler="el.getBottomToolbar().setStatus({text : valid ? 'Form is valid' : 'Form is invalid', iconCls: valid ? 'icon-accept' : 'icon-exclamation'});" />

</Listeners>

• ComboBoxWidget 

The basic functions and. the dropdownlist control of the net standard control is the same. The difference is that the dropdownlist can only be selected and cannot be edited and input. If you need a function that can be manually input and selected for conditional filtering, dropdownlist cannot be implemented, ext. net makes up for the shortcomings of dropdownlist. The following is a simple example:

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