To be honest, this extjs SeriesArticleI am not very popular in the blog field. Maybe there are not many people learning this stuff, but I think there is such a series of articles that are 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 backgroundCodeFor the sake of simplicity, for 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 %> , // Get the string value of serverdata. Do not use "". Otherwise, it is not the object data, but the string. This is a clever key point: Convert the Server String to JS object data, is it super convenient.
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 the C # background variable. Refer to the above. Note that if you want to obtain the string type, use the quotation mark var STR = "<% = serverdata %>" in JS (Return"['Hubei ', 'jiangxi', 'anhui ']")
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 Province " ], The value is assigned to both the value and text of ComboBox.
2 . 2d and multidimensional arrays :[[ " One " , " Bbar " , " 111 " ], [ " Two " , " Tbar " , " 222 " ], The first and second dimensions are assigned to the value and text respectively, while the 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. Multiple fields are required. By default, displayfield is undefine when mode is remote, and displayfield is "text" When select list"
Mode: ' Local ' , // Because the data has been retrieved locally, the default value of 'local' 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
Add a listeners event:
// There are a lot of ComboBox events (APIS) that we cannot explain one by one, but we can draw a line by one. The select event is a typical one.
Listeners :{
" Select " : Function (){
Alert (Ext. Get ( " Combo " ). Dom. value ); // Get 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 Parameters
Transform: ID // Used for style conversion. timefield also has this attribute as a Child class 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 " > Langxi < / 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 " // Show text fields
3 . Editable: False // If it is false, it 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 list.
5 . Hiddenname: String // Note the name of this combo when actually submitting
6 . Typeahead: True , // Latency query, which works with the following parameters
7 . Typeaheaddelay: 3000 , // The default value is 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!
