Extjs4.0 ComboBox How to achieve three-level linkage _extjs

Many netizens asked, Extjs4.0 ComboBox How to achieve, fortunately before using 3.x to achieve a three-level linkage, now use Extjs4.0 to achieve the same linkage effect. One note is that the model in 3.x: ' Local ' in Extjs4.0 with Querymode: ' Local ', and in 3.x load data with reload, but in extjs4.0 to use load to get data. The following figure:

Code section

First look at the HTML code:

The simple thing is to load the basic CSS files and JS files and load the custom combobox.js files.

Combobox.js:

 Ext.require (' ext.* '); Ext.onready (function () {///define ComboBox Model Ext.define (' state ', {extend: ' Ext.data.Model ', fields: [{type: ' int ')
 
 , name: ' ID '}, {type: ' string ', Name: ' CNAME '}]}; Load province data source var store = ext.create (' Ext.data.Store ', {model: ' state ', proxy: {type: ' ajax ', url: ' city.asp
 ? act=sheng&n= ' +new Date (). GetTime () + '}, Autoload:true, remotesort:true}); Load City Data source var Store1 = ext.create (' Ext.data.Store ', {model: ' state ', proxy: {type: ' ajax ', url: ' city.as
 P?act=shi&n= ' +new Date (). GetTime () + '}, Autoload:false, remotesort:true}); Load area data source var Store2 = ext.create (' Ext.data.Store ', {model: ' state ', proxy: {type: ' ajax ', url: ' city.as
  
 
 
 P?act=qu&n= ' +new Date (). GetTime () + '}, Autoload:false, remotesort:true}); Ext.create ("Ext.panel.Panel", {renderTo:document.body, width:290, height:220, title: "City Level Three linkage", Plain:true, MA Rgin: ' 30 10 0 80', bodystyle: "padding:45px 15px 15px 15px;", defaults: {autoscroll:true, bodypadding:10}, items:[{ 
    Xtype: "Combo", Name: ' Sheng ', id: ' Sheng ', Fieldlabel: ' Select Province ', Displayfield: ' CNAME ', Valuefield: ' ID ',
    Store:store, TriggerAction: ' All ', Querymode: ' Local ', Selectonfocus:true, Forceselection:true, Allowblank:false, Editable:true, Emptytext: ' Please select Province ', Blanktext: ' Please select Province ', listeners:{select:functio
           N (combo, record,index) {try{//useradd = record.data.name;
           var parent=ext.getcmp (' Shi ');
           var parent1 = ext.getcmp ("Qu");
           Parent.clearvalue ();
           Parent1.clearvalue ();
         Parent.store.load ({Params:{param:this.value}}); The catch (ex) {Ext.MessageBox.alert ("error") failed to load data.
         "); }}, {xtype: "combo", Name: ' Shi ', id: ' Shi ', fieldlabel: ' Select City ', Displayfield: ' CN Ame ', ValuEfield: ' id ', store:store1, triggeraction: ' All ', Querymode: ' Local ', Selectonfocus:true, forceselection : True, Allowblank:false, Editable:true, Emptytext: ' Please choose City ', Blanktext: ' Please choose City ', listeners:{se
           Lect:function (combo, record,index) {try{//useradd = record.data.name;
           var parent = ext.getcmp ("Qu");
           Parent.clearvalue ();
         Parent.store.load ({Params:{param:this.value}}); The catch (ex) {Ext.MessageBox.alert ("error") failed to load data.
         "); }}, {xtype: "combo", Name: ' qu ', id: ' qu ', Fieldlabel: ' Select Area ', Displayfield: ' Cnam E ', Valuefield: ' id ', Store:store2, triggeraction: ' All ', Querymode: ' Local ', selectonfocus:true, fo
Rceselection:true, Allowblank:false, Editable:true, Emptytext: ' Please select area ', Blanktext: ' Please select Area ',}]}
 });

In the above code, if you define the store data source directly in the ComboBox, you will see that when you choose the first province and click on the second city, you will flash and then click to see the city's data. To solve this situation, you must first define a good province, city, and district data sources. Then click on the time, there will be no such situation.

Code, using store-province data, set its autoload to true, the first time the page is loaded, it will automatically load the province's data, and then to the province and the city to add a listening Select, the role is when clicked Province, to clear the city and district data, and load the corresponding data to the data source of the city according to the currently selected value. Of course Store1 and Store2 principle are the same.

Finally, the server will be based on the value of the data retrieval and return the correct data, there is no query data from the database, but simply write some test code, I believe ExtJS code does not have any problems, then the server to return data, it is not a very important thing.

City.asp:

 <% @LANGUAGE = "VBSCRIPT" codepage= "65001"%> <% Response.ContentType = "text/html" Response.Charset = "UTF-8" %> <% Dim act:act = Request ("act") Dim Param:param = Request ("param") If act = "Sheng" Then response.wri Te ("[") Response.Write ("{") "CNAME" ":" "Beijing" "," "id" ":" "110000" "},") Response.Write ("{" "CNAME" ":" "Inner Mongolia Autonomous Region" "," "id" "" ""
      150000 ""} ") Response.Write ("] ") End If act =" shi "Then if param =" 110000 "Then Response.Write (" [") Response.Write ("{" "CNAME" ":") "Municipal District" "," "id" ":" "110100" ""}, ") Response.Write (" {"" CNAME "": "" City Jurisdiction "", "" id "": "" 110200 "} ") Response.Write ("] ") ElseIf param =" 150000 "Then Response.Write (" [") Response.Write (" {"" CNAME "": "
    "Hohhot City" "," "id" ":" "150100" "},") Response.Write ("{" "CNAME" ":" "Baotou" "," "id" ":" "150200" "}") Response.Write ("]") End If If act = "qu" Then if param = "110100" Then Response.Write ("[") Response.Write ("{" "Cnam E "": "" Chaoyang District "", "" id "": "" 110101 ""}, ") Response.Write (" {"" CNAME "": "" Changping District "", "" id "": "" 110102 ""} ") Response.Write ("] ") ElseIf param =" 110200 "Then Response.Write (" [") Response.Write (" {"" CNAME "": "" Miyun "", "" id "": "" 110201 ""}, ") Response.Write (" {"" C
      Name ":" "Fangshan County" "," "id" ":" "110202" "}" Response.Write ("]") ElseIf param = "150100" Then Response.Write ("[") Response.Write ("{" "CNAME" ":" "Huimin District" "," "id" ":" "150101" "},") Response.Write ("{" "CNAME" ":" "Xincheng" "," "" ID "": "" "" "" "" "" "" "" "" ) Response.Write ("]") ElseIf param = "150200" Then Response.Write ("[") Response.Write ("{" "CNAME" ":" " Qingshan "", "" id "": "" 150201 ""}, ") Response.Write (" {"" CNAME "": "" Dong Ho District "", "" id "": "" 150202 ""} ") Response.Write ("] ") En
 D If End If%>

The above is the entire content of this article, I hope to help you learn.