Coolite Toolkit study Note 3: buttons, TextField, DataField, and ComBox of basic controls

Buttons, TextField, DataField, and ComBox are nothing to learn about. Any one has learned ASP. NET friends should use these controls. These controls in the Coolite Toolkit are compared to the standard ASP. NET Control provides special functions, such as the DataFiled control in.. NET Framework. These controls are very useful in system development.

1. Button Control
The Coolite Toolkit also provides four Button controls: Button, ImageButton, LinkButton, and SplitButton. The Button is used in the first two notes. Here we will record it and trigger the synchronization event:

<Ext: Button ID = "Button1" runat = "server" Text = "" AutoPostBack = "True" onclick = "button#click"/>

Use Listeners to add a client for the control:

<Ext: Button ID = "Button2" runat = "server" Text = "Click me">
<Listeners>
<Click Handler = "onClientClick ()"/>
</Listeners>
</Ext: Button>
<Script type = "text/javascript">
Function onClientClick (){
Alert ("Hello ");
}
</Script>

Use AjaxEvents to add Ajax processing methods for the control:

<Ext: Button ID = "Button3" runat = "server" Text = "Click me">
<AjaxEvents>
<Click OnEvent = "Button3_Click">
<EventMask ShowMask = "true"/>
</Click>
</AjaxEvents>
</Ext: Button>

/*************************************** ***************/
Protected void Button3_Click (object sender, AjaxEventArgs e)
{
Ext. Msg. Alert ("title", "displayed message content"). Show ();
}

Another important feature is the shortcut menu item. You can add a menu option to the button as follows:

<Ext: Button ID = "Button4" runat = "server" Text = "Click me">
<Menu>
<Ext: Menu runat = "server">
<Items>
<Ext: MenuItem ID = "MenuItem1" Text = "menu item" runat = "server"> </ext: MenuItem>
</Items>
</Ext: Menu>
</Menu>
</Ext: Button>

Now I know about the Button control and only use it. More advanced content will be studied as needed.
ImageButton is also widely used. You can set the image to display different styles. However, the ImageButton control of the Coolite Toolkit is different from that of Microsoft. Microsoft can only set one display image, if you want to achieve dynamic interaction effects, you can only control the effect through the style or script program. Coolite Toolkit directly provides external attributes, and you only need to simply set it to complete a variety of interface interaction effects, its function is the same as ext: Button, as shown below:

<Ext: ImageButton ID = "ImageButton1"
Runat = "server"
ImageUrl = "button/button.gif"
OverImageUrl = "button/overButton.gif"
DisabledImageUrl = "button/disabled.gif"
PressedImageUrl = "button/pressed.gif">
<AjaxEvents>
<Click OnEvent = "Button3_Click"/>
</AjaxEvents>
</Ext: ImageButton>

SplitButton does not feel anything special. Maybe I have not learned much about it ~~~~

Ii. TextFiled Control
The TextFiled control is equivalent to the TextBox Control in ASP. NET. It is mainly used for text data input or display, while the NumberFiled control is used for digit input. The TextFiled control is easy to use. Here I want to mention several of its feature attributes: EmptyText is used to set or obtain the prompt information of the displayed input data. The Note attribute is used to set or obtain static description information, and the display position of information can be set through the NoteAlign attribute.

3. DataFiled controls
This control is very useful in many places. The selected date is obtained directly through its SelectedData attribute. The effect is as follows:

4. ComboBox controls
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. The Coolite Toolkit makes up for the DropDownList deficiency. There is little difference between the two methods. The following is a simple example:

<Ext: ComboBox ID = "combox1" runat = "server">
<Items>
<Ext: ListItem Text = "Telecom" Value = "Telecom"/>
<Ext: ListItem Text = "mobile" Value = "mobile"/>
<Ext: ListItem Text = "Unicom" Value = "Unicom"/>
</Items>
</Ext: ComboBox>

In addition, ComboxBox of Coolite Toolkit also provides Triggers and Listeners, which allow you to customize more advanced applications for ComboBox. Literally, you can guess what the combination of a trigger and a listener can achieve? Let's take a look:

The three statuses of ComboxBox are shown above: uninput and unselected status, drop-down select item status, and the status after the selected item. To achieve this, Triggers and Linteners are required, the code snippet is as follows:

<Ext: ComboBox ID = "ComboBox2" runat = "server" EmptyText = "select or enter data">
<Items>
<Ext: ListItem Text = "Telecom"/>
<Ext: ListItem Text = "mobile"/>
<Ext: ListItem Text = "Unicom"/>
</Items>
<Triggers>
<Ext: FieldTrigger Icon = "Clear" HideTrigger = "true"/>
</Triggers>
<Listeners>
<Select Handler = "this. triggers [0]. show ();"/>
<BeforeQuery Handler = "this. triggers [0] [this. getRawValue (). toString (). length = 0? 'Hide ': 'show'] (); "/>
<TriggerClick Handler = "if (index = 0) {this. clearValue (); this. triggers [0]. hide ();}"/>
</Listeners>
</Ext: ComboBox>

 

Note: This article is reprinted to the notes for the growth of B huannia workshop.