Home > Developer > JavaScript
How does Extjs4.0 ComboBox implement three-level linkage,
Many netizens are asking how to implement Extjs4.0 ComboBox. Fortunately, a three-level linkage was implemented with 3. x, and now Extjs4.0 is used to achieve the same linkage effect. Note that: 3. model: 'local' in x is expressed in queryMode: 'local' in Extjs4.0, and in 3. reload is used when loading data in x, but Load is used in extjs4.0 to obtain data. For example:
Code Section
First look at the HTML code:
<Html>Simply put, it loads basic CSS and JS files and custom combobox. js files.
Combobox. js:
Ext. require ('ext. * '); Ext. onReady (function () {// defines the ComboBox model Ext. define ('state', {extend: 'ext. data. model ', fields: [{type: 'int', name: 'id'}, {type: 'string', name: 'cname'}]}); // load the provincial 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 Municipal 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 zone 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: "", 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: 'select province ', blankText: '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 loading failed. ") ;}}}, {Xtype:" combo ", name: 'shi ', id: 'shi', fieldLabel: 'select a city ', displayField: 'cname ', valueField: 'id', store: store1, triggerAction: 'all', queryMode: 'local', selectOnFocus: true, forceSelection: true, allowBlank: false, editable: true, emptyText: 'select a city ', blankText: 'select a city', listeners: {select: function (combo, record, index) {try {// userAdd = record. data. name; var parent = Ext. getCmp ("qu"); paren T. clearValue (); parent. store. load ({params: {param: this. value }});} catch (ex) {Ext. messageBox. alert ("error", "data loading failed. ") ;}}}, {Xtype:" combo ", name: 'qu', id: 'qu', fieldLabel: 'choice region', displayField: 'cname ', valueField: 'id', store: store2, triggerAction: 'all', queryMode: 'local', selectOnFocus: true, forceSelection: true, allowBlank: false, editable: true, emptyText: 'select a partition ', blankText: 'select a partition',}]});In the above Code, if you define the store data source directly in ComboBox, this situation will occur, that is, when you select the first province and click the second city, it will flash, click again to see the city data. To solve this problem, you must first define the data source of the province, city, and district. When you click again, the above situation will not occur.
In the code, use store as the province data and set its autoLoad to true. When the page is loaded for the first time, the province data is automatically loaded, then, the select listener is added to the province and city to clear the data of the city and district when the province is clicked, load the corresponding data to the Municipal Data Source Based on the selected value. Of course, store1 and store2 share the same principle.
Finally, the server needs to retrieve and return the correct data based on the transmitted values. The data is not queried from the database, but some test code is simply written, I believe that there is no problem with extjs code, so it is not very important 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" "," "id" ":" 110000 ""}, ") Response. write ("{" "cname" ":" "Inner Mongolia" "," "id" ":" 150000 ""} ") Response. write ("]") End If act = "shi" Then If param = "110000" Then Response. write ("[") Response. write ("{" "cname" ":" "city jurisdiction" "," "id" ":" 110100 ""}, ") Response. write ("{" "cname" ":" "city jurisdiction" "," "id" ":" 110200 ""} ") Response. write ("]") ElseIf param = "150000" Then Response. write ("[") Response. write ("{" "cname" ":" "Hohhot" "," "id" ":" 150100 ""}, ") Response. write ("{" "cname" ":" "Baotou City" "," "id" ":" 150200 ""} ") Response. write ("]") End 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" ":" "Residents" "," "id" ":" 150101 ""}, ") Response. write ("{" "cname" ":" "New City" "," "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 %>The above is all the content of this article, hoping to help you learn.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
