Extjs2.0 Learning Series (6)-Ext. formpanel-Article 3 (ComboBox)

This article from http://www.cnblogs.com/qianxudetianxia

To be honest, the extjs series of articles are not very popular in the blog Park. Maybe there are not many people learning this stuff, however, I think this series of articles is very helpful to Chinese friends! Please support it!
In the previous article, the extjs2.0 Learning Series (5) -- Ext. formpanel, we discussed the knowledge of fieldset and form verification. Today we will go deep into the use of ComboBox components in form elements. Will involve
Data Interaction on the. NET simple server is not discussed in depth for the moment. In the future, server interaction will be analyzed in detail, but it may take a long time!
5. server data as a ComboBox data source instance
First, obtain JSON data from the server:

// CS background Code. For the sake of simplicity, this is just an example. The main string format is required (for beginners, note that the following code is placed in the class rather than in the method)
Public String serverdata = "['hubei ', 'jiangxi', 'anhui ']";

// Aspx front-end JS introduction code
Ext. onready (function (){
VaR combo = new Ext. Form. ComboBox ({
Store: <% = serverdata %>, // obtain the string value of serverdata. Do not use "". Otherwise, it is not the object data, but the string. This is a clever key point: is it super convenient to convert the Server String into JS object data.
Emptytext: 'select a province ....',
Applyto: 'combo'
});
});

// Aspx foreground HTML code
<Input type = "text" id = "combo" size = "20"/>

We can use <% = serverdata %> to obtain the simplest attribute data of the server. Question: How does JS and HTML call C # background?
Variables and methods? (Variable calls are described above)
6. How does JS and HTML call C # background variables and methods?
I will not talk about this topic much, but I will explain it on the Internet.
1. JS calls C # background variables. Refer to the above. Note that if you want to obtain the string type, use the quotation mark var STR = "<% = serverdata %>" in JavaScript ("['hubei ', 'jiangxi', 'anhui ']" is returned).
2. js calls the C # background method: <! -- There is a method in the background:
Public String serverdata ()
{
Return "fdfdfdsf ";
}
Front-end code: -->
<Input id = "text2" type = "text" value = "<% = serverdata () %>"/>

3. js calls the C # method with parameters in the background <! -- Public String serverdata (string PRAM)
{
Return pram + ", I'm data transmission ";
}
It mainly deals with the question of JS quotation marks and will be correct if you try multiple times -->
<SCRIPT> alert ('<% = serverdata ("humble world") %>'); </SCRIPT>

Well, now we have the js method to obtain background data, so don't be afraid of it. However, this is just a small step.
7. Details about the data source store format of ComboBox
In the previous example, we always assigned a one-dimensional array to the data source store of ComboBox. In fact, store supports multi-dimensional and store. Data. store types. // The following code illustrates several types of data.
1. One-dimensional array: ["Jiangxi", "Hubei"]. The value is assigned to both the value and text of ComboBox.
2. 2d and multidimensional arrays: [["one", "bbar", "111"], ["two", "tbar", "222"], values of Dimension 1 and dimension 2 are assigned to value and text, while values of other dimensions are ignored.
3. Store type: including groupingstore, jsonstore, and simplestore.
// We will take three steps:
// Step 1: Provide data:
VaR DATA = [['hubei ', 'hubei'], ['jiangxi', 'jiangxi'], ['anhui ', 'anhui'];
// Step 2: import to store:
VaR store = new Ext. Data. simplestore ({
Fields: ['Chinese ', 'English'],
Data: Data
});
// Step 3: entrust the store to the ComboBox store
VaR combo = new Ext. Form. ComboBox ({
Store: store,
Displayfield: 'English ', // the field to be displayed in the store field. It is a required parameter for multiple fields. By default, when mode is remote, displayfield is undefine, displayfield is "text" in the select list"
Mode: 'local', // because the data has been retrieved to the local device, the default value is "remote ".
Emptytext: 'select a province ...',
Applyto: 'combo'
});

Here we introduce two new parameters displayfield and mode. Please remember that they will not be specifically described later.
8. Get the value of ComboBox
There are a lot of listeners events: // ComboBox events (APIs). We can't explain them one by one, but we can refer to the other three. The select event is a typical one.
Listeners :{
"Select": function (){
Alert (Ext. Get ("combo"). Dom. Value); // obtain the combo value.
}
}
// Here we provide a method that is not very good, so do not stay too long here

9. Apply the ComboBox style of extjs to the select drop-down box.
Core parameter introduction transform: Id // used for style conversion. timefield is also used as a subclass of ComboBox.

Core code: // JS Code
VaR extselect = new Ext. Form. ComboBox ({
Transform: "select", // ID in HTML
Width: 80 // width
});
// Html code
<Select id = "select">
<Option value = "1"> *** </option>
<Option value = "2"> blog </option>
<Option value = "3"> Baidu </option>
<Option value = "4"> Sina </option>
</SELECT>
// Is it super simple?

The differences between extjs and extjs are not obvious!
10. Other important parameters of ComboBox
1. valuefield: "valuefield" // Value Field
2. displayfield: "field" // display text fields
3. Editable: false // false, which cannot be edited. The default value is true.
4. triggeraction: "All" // set it to "all". Otherwise, if the default value is "query", after you select a value, only the matching option is displayed, if it is set to "all", all options are displayed in each drop-down.
5. hiddenname: String // The Name Of The combo when the request is submitted. Be sure to pay attention to it.
6. typeahead: True, // latency query, which works with the following parameters
7. typeaheaddelay: 3000, // default value: 250
// For other parameters, refer to the API or try it yourself

Other fancy features of ComboBox are not described here.
Finally, how can we flexibly separate the interaction between CS data and JS data on the ASPX page? Because we all like to put Js in a separate file and then reference it on the ASPX page.
In this case, it is inconvenient for me to directly obtain CS data in Js. In my opinion, you can obtain data on the ASPX page and use JS as your JS variable.
It can be referenced in JS or directly obtained through the URL address.
The reason why ComboBox is so arrogant is that this is something that is sometimes really cute and hateful!
In the next article, we will continue to explain other form elements in form!