Many netizens are asking how to implement Extjs4.0 ComboBox. Fortunately, I used 3.x to implement a three-level linkage, and now I use Extjs4.0 to achieve the same linkage effect. One thing to note is that the model:'local' in 3.x is represented by queryMode:'local' in Extjs4.0, and reload is used when loading data in 3.x, but in extjs4.0, load is used to obtain data. As shown in the figure below:
Code section
Let's look at the HTML code first:
<html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>MHZG.NET-City three-level linkage instance</title><link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /><script type="text/javascript" src="../../bootstrap.js"></script><script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script><script type="text/javascript" src="combobox.js"></script></head><body></body></html>
It's very simple, it loads the basic CSS file and JS file, and loads the customized combobox.js file.
combobox.js:
Ext.require('Ext.*');Ext.onReady(function(){ //Define ComboBox modelExt.define('State', { extend: 'Ext.data.Model', fields: [ {type: 'int', name: 'id'}, {type: 'string', name: 'cname'} ] }); //Load the 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 the city data source var store1 = Ext.create('Ext.data.Store', { model: 'State', proxy: { type: 'ajax', url: 'city.asp?act=shi&n='+new Date().getTime()+'' }, autoLoad: false, remoteSort:true }); //Load the city data source var store2 = Ext.create('Ext.data.Store', { model: 'State', proxy: { type: 'ajax', url: 'city.asp?act=qu&n='+new Date().getTime()+'' }, autoLoad: false, remoteSort:true }); Ext.create("Ext.panel.Panel",{ renderTo: document.body, width:290, height:220, title:"City three-level linkage", plain: true, margin:'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:function(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}}); } catch(ex){ Ext.MessageBox.alert("Error","Data load failed."); } } } } } }, { xtype:"combo", name:'shi', id : 'shi', fieldLabel:'select city', displayField:'cname', valueField:'id', store:store1, triggerAction:'all', queryMode: 'local', selectOnFocus:true, forceSelection: true, allowBlank:false, editable: true, emptyText:'Please select city', blankText : 'Please select city', listeners:{ select:function(combo, record,index){ try{ //userAdd = record.data.name; var parent = Ext.getCmp("qu"); parent.clearValue(); parent.store.load({params:{param:this.value}}); } catch(ex){ Ext.MessageBox.alert("Error","Data loading failed."); } } } } } }, { xtype:"combo", name:'qu', id : 'qu', fieldLabel:'s selection area', displayField:'cname', valueField:'id', store:store2, triggerAction:'all', queryMode: 'local', selectOnFocus:true, forceSelection: true, allowBlank:false, editable: true, emptyText:'Please select area', blankText : 'Please select area', } ] })});In the above code, if the store data source is directly defined in ComboBox, this situation will occur, that is, when the first province is selected and the second city is clicked, it will flash and then click, and the city data will appear. To solve this situation, we must first define the data sources of provinces, cities and districts. Then when you click again, the above situation will not occur.
In the code, use the store as the data, and set its autoLoad to true. Then when the page is loaded for the first time, the data of the saved will be automatically loaded, and then the listening select is added to the province and city. The function is that when you click on the province, you must clear the data of the city and district, and load the corresponding data into the city's data source according to the currently selected value. Of course, the principles of store1 and store2 are the same.
Finally, the server needs to search and return the correct data based on the passed value. There is no querying data from the database here, but simply writing some test code. I believe that there is no problem with the extjs code, so it is not a very important thing for the server to return data.
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.Write("[") Response.Write("{""cname"":""Beijing City","id"":""110000"},") Response.Write("{""cname"":""Inner Mongolia Autonomous Region",""id"":""150000"}") Response.Write("]") End If If act = "shi" Then If param = "110000" Then Response.Write("[") Response.Write("{""cname"""":""City-level district",""id"":""110100"},") Response.Write("{""cname""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" param = "150000" Then Response.Write("[") Response.Write("{""cname"":""Hohhot City"","id"":""150100"},") Response.Write("{""cname""":""Baotou City"","id"":""150200"}") Response.Write("]") End If End If If Act = "qu" Then If param = "110100" Then Response.Write("[") Response.Write("{""cname"":""Chaoyang District",""id"":""110101"},") Response.Write("{""cname"":""Changping District","id"":""110102"}") Response.Write("]") ElseIf param = "110200" Then Response.Write("[") Response.Write("{""cname"":""Miyun County","id"":""110201"},") Response.Write("{""cname"":""Fangshan County","id"":""110202"}") Response.Write("]") ElseIf param = "150100" Then Response.Write("[") Response.Write("{""cname""":""Ruibin District","id"":""150101"},") Response.Write("{""cname""":""New City District","id"":""150102"}") Response.Write("]") ElseIf param = "150200" Then Response.Write("[") Response.Write("{""cname"":""Qingshan District",""id"":""150201"},") Response.Write("{""cname""":""Donghe District","id"":""150202"}") Response.Write("]") End If End If%>The above is all about this article, I hope it will be helpful to everyone's learning.