ExtJs2.0 Learning Series (6)--ext.formpanel of the third type (ComboBox article)

ExtJs2.0 Learning Series (5)--ext.formpanel in the second, we discussed the fieldset and form validation, and today we go deep into the use of ComboBox components in the form elements. Will involve
To. NET simple server data interaction, but not in-depth discussion, later will be detailed analysis of server interaction related, but may have to wait a long time, hehe.
5. Server data as a ComboBox data source instance
First get the JSON data from the server:
CS background code, for simplicity, example, to the main string format (Novice note, the following code is placed inside the class, not in the method)
public string serverdata = "[' Hubei ', ' Jiangxi ', ' Anhui ']";

ASPX front desk JS Introduction code
Ext.onready (function () {
var combo = new Ext.form.ComboBox ({
Store: <%= serverdata%>,//Get Serverdata string value, do not use "", otherwise it is not object data, but string, This is a very clever key point: The server's string into the JS object data, is not super convenient.
Emptytext: ' Please select a province .... ' ,
ApplyTo: ' Combo '
});
});
ASPX foreground HTML code
< input type = "text" id = "Combo" size = "/>"
We get to the server's simplest attribute data by way of <%=ServerData%>. The problem is, JS and HTML How to call the C # backstage
of variables and methods. (The invocation of the variable is just described above)
6.js and HTML How to call the C # backend variables and methods
On this topic, I do not say much, on the internet a lot of explanations, here only a brief description
1.js invoke C # background variables, refer to above, note that if you want to get string type, in JS, use quotes var str= "<%=ServerData%>" (return "[' Hubei ', ' Jiangxi ', ' Anhui ']")
2.js calling the C # background method:
<!--backstage there is a way:
public string Serverdata ()
{
return "FDFDFDFDSF";
}
Foreground code:-->
< input ID = "TEXT2" type = "text" value = "<%=serverdata ()%>"/> 3.js Invoke method of C # background with parameters
<!--public string Serverdata (String pram)
{
Return pram+ ", I am the parameter pass in";
}
The main is to deal with the problem of JS quotation marks, more attempts will be correct-->
< script > Alert (' <%=serverdata ("humble World")%> '); </script >
OK, now we have JS to obtain background data method means, not afraid, but this is only a small step.
7.ComboBox Data Source store format detailed
In the previous example, we have been assigning a one-dimensional array to the ComboBox data source store, in fact the store supports multidimensional and Store.data.Store types.
Here are some examples of the data in code
1. One-dimensional array: ["Jiangxi", "Hubei"], values are assigned to ComboBox value and text
2. Two multidimensional array: [["One", "Bbar", "],[", "Two", "Tbar", "222"]], the first and second dimension are assigned to value and text, and the other dimensions are ignored
3. Store Type: including Groupingstore, Jsonstore, Simplestore.
Let's take three steps:
First step: Provide data:
var data=[[' Hubei ', ' Hubei '],[' Jiangxi ', ' Jiangxi '],[' Anhui ', ' Anhui '];
Step two: Import into the store:
var store = new Ext.data.SimpleStore ({
Fields: [' Chinese ', ' 中文版 '],
Data:data
});
Step three: Pay the store to ComboBox's Store
var combo = new Ext.form.ComboBox ({
Store:store,
Displayfield: ' 中文版 ',//store fields you want to display fields, multiple field required parameters, default when mode is remote Displayfield for undefine, when the select list is Displayfield as " Text
Mode: ' local ',///Because data has been fetched locally, ' locals ', default ' remote ', enum
Emptytext: ' Please select a province ... ' ,
ApplyTo: ' Combo '
});
Here we have introduced two new parameters Displayfield and mode, remember, no longer specifically described later.
Value acquisition of 8.ComboBox
Add listeners Event:
There are a lot of ComboBox events (APIs) that we can't explain, but we can extrapolate that the Select event is one of the typical
listeners:{
' Select ': function () {
Alert (Ext.get ("combo"). Dom.value); Get a value with ID combo
}
}
Here we provide a not very good way to stay here without doing too much
9. Apply the ExtJS ComboBox style to the Drop-down box in select
Introduction of core parameters
Transform:id//For converting styles, Timefield as a subclass of ComboBox also has this attribute 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" > Surf </option>
< option value = "2" > Blog Park </option>
< option value = "3" > Baidu </option>
< option value = "4" > Sina </option>
</select>
is not super simple. It is not also possible to see the differences between the ExtJS, but not obvious.
Other important parameters for 10.ComboBox
1. Valuefield: "Valuefield"//Value Field
2. Displayfield: "Field"//Display text field
3. Editable:false//False is not editable, the default is True
4. TriggerAction: "All"//Please set to "all", otherwise the default is "query" in the case, you select a value, and then this drop-down, only the matching option, if set to "all", each Drop-down display all options
5. hiddenname:string//Real submission of this combo name, please be sure to note
6. Typeahead:true,//delay query, with the following parameters
7. typeaheaddelay:3000,//Default 250
Other parameters, please refer to the API, or try some other fancy features about ComboBox in this little introduction.
Finally, how to achieve the more flexible ASPX page separation between CS data and JS data interaction. Because we all like to put JS in a separate file, and then in the ASPX page reference
So there is a problem, I am in JS directly to obtain CS data is a bit inconvenient. I think you can do this, in the ASPX page to get the data, and as JS, you will be JS variable, you can
Referred to in JS, or directly through the URL to obtain the address.
The reason why so long-winded talk about ComboBox, is because this thing sometimes really let people love and hate.
In the next chapter, we'll continue to explain the other form elements in the form.