Extjs4.0 ComboBox如何实现三级联动

很多网友在问，Extjs4.0 ComboBox如何实现，好在之前用3.x实现过一个三级联动，如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是，3.x中的型号： '本地'在Extjs4.0中用' queryMode: '本地'来表示，而且在3.x中负荷数据时用重装，但是在extjs4.0中要使用负荷来获取数据。如下图：

代码部分

先看超文本标记语言代码：

html hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleMHZG .互城市三级联动实例/titlelink rel='样式表type='text/css' href='././resources/CSS/ext-all。' CSS/'脚本类型=' text/JavaScript ' src=' http :/./bootstrap。js '/script脚本类型=' text/JavaScript ' src=' http :/./locale/ext-lang-zh _ cn。js '/script脚本类型=' text/JavaScript ' src=' http : combobox。js '/脚本/头体/体/html简单的很，就是加载了基本的半铸钢钢性铸铁(铸造半钢)文件和射流研究…文件，并且加载自定义的combobox.js文件。

combobox.js:

Ext.require('Ext .*');Ext.onReady(function(){ //定义组合框模型Ext.define('State '，{ extend: 'Ext.data.Model '，fields: [ {type: 'int '，name: 'id'}，{type: 'string '，name : ' cname ' }]})；//加载省数据源var store=ext。创建(' ext。数据。store '，{ model: 'State '，proxy: { type: 'ajax '，url: 'city.asp？act=shengn=' new Date().getTime() '' }，autoLoad: true，远程排序： true })；//加载市数据源var store 1=ext。创建(' ext。数据。store '，{ model: 'State '，proxy: { type: 'ajax '，url: 'city.asp？act=shin=' new Date().getTime() '' }，autoLoad: false，远程排序： true })；//加载区数据源var store 2=ext。创建(' ext。数据。store '，{ model: 'State '，proxy: { type: 'ajax '，url: 'city.asp？act=群='新日期()。getTime() '' }，autoLoad: false，远程排序： true })；Ext.create('Ext.panel.Panel '，{ renderTo: document.body，width:290，height:220，title: '城市三级联动，plain: true，margin:'30 10 0 80 '，body style : ' padd : 45px 15px 15px；默认值为：{ autoScroll: true，bodyPadding: 10 }，items:[{ xtype:'combo '，name:'sheng '，id : 'sheng '，fieldLabel: '选择省，displayField:'cname '，valueField:'id '，store:store，triggerAction:'all '，queryMode: 'local '，selectOnFocus:true，forceSelection: true，allowBlank:false，editable: true，emptyText: '请选择省，blankText : '请选择省，监听器： {选择：函数(组合、记录、索引){尝试{//userADd=record。数据。姓名；var parent=Ext。GetCmp(' Shi ')；var父1=Ext。GetCmp(' qu ')；父母。clear value()；家长1。ClearValue()；父母。商店。加载({ params 3360 { param : this。value } })；} catch(ex){ Ext .MessageBox.alert('错误','数据加载失败。');} } } }，{ xtype:'combo '，name:'shi '，id : 'shi '，fieldLabel: '选择市，displayField:'cname '，valueField:'id '，store:store1，triggerAction:'all '，queryMode: 'local '，selectOnFocus:true，forceSelection: true，allowBlank:false，editable: true，emptyText: '请选择市，blankText : '请选择市，监听器： {选择：函数(组合、记录、索引){尝试{//userADd=record。数据。姓名；var parent=Ext。GetCmp(' qu ')；父母。clear value()；父母。商店。加载({ params 3360 { param : this。value } })；} catch(ex){ Ext .MessageBox.alert('错误','数据加载失败。');} } } }，{ xtype:'combo '，name:'qu '，id : 'qu '，fieldLabel: '选择区，displayField:'cname '，valueField:'id '，store:store2，triggerAction:'all '，queryMode: 'local '，selectOnFocus:true，forceSelection: true，allowBlank:false，editable: true，emptyText: '请选择区，blankText : '请选择区', } ] })});上述代码中，如果在组合框直接定义商店数据源，会出现这样一种情况，那就是当选择完第一个省，点击第二个市的时候，会闪一下，再点击，才会出现市的数据。那么要解决这样的情况，那么必须先要定义好省、市、区的数据源。那么再点击的时候，就不会出现上述情况了。

代码中，使用商店为省的数据，设置其自动加载为没错，那么页面第一次加载的时候，就会自动加载省的数据，然后给省和市添加了监听选择，作用在于当点击省的时候，要清空市和区的数据，并根据当前选定的值去加载对应的数据到市的数据源中。当然商店一和商店2原理是一样的。

最后，服务端要根据传的值进行数据检索及返回正确数据，这里没有从数据库中查询数据，而只是简单的写了一些测试代码，相信框架代码没有任何的问题了，那么服务端返回数据，就不是一件很重要的事情了。

City.asp:

% @ LANguage=' VBscript ' code page=' 65001 ' % % Response .ContentType='text/html '响应字符集=' UTF-8% % % Dim act : act=请求(' act') Dim参数：参数=请求(“参数”)如果act='生'则响应。写下('[')回应。写入(“cname”:“”北京市，' id'':''110000''}，')响应。写入(“cname”:“”内蒙古自治区，' id'':''150000''} ')响应。写(']')结束如果如果行动='是'那么如果参数='110000 '那么响应。写下('[')回应。写入(“cname”:“”市辖区，' id'':''110100''}，')响应。写入(“cname”:“”市辖县，' id'':''110200''} ')响应。写(']') ElseIf参数='150000 '然后响应。写下('[')回应。写入(“cname”:“”呼和浩特市，' id'':''150100''}，')响应。写入(“cname”:“”包头市，id为： 150200 )响应。写(']')结束如果结束如果如果行动='qu '然后如果参数='110100 '然后响应。写下('[')回应。写入(“cname”:“”朝阳区，' id'':''110101''}，')响应。写入(“cname”:“”昌平区，' id'':''110102''} ')响应。写(']') ElseIf参数='110200 '然后响应。写下('[')回应。写入(“cname”:“”密云县，' id'':''110201''}，')响应。写入(“cname”:“”房山县，' id'':''110202''} ')响应。写(']') ElseIf参数='150100 '然后响应。写下('[')回应。写入(“cname”:“”回民区，' id'':''150101''}，')响应。写入(“cname”:“”新城区，' id'':''150102''} ')响应。写(']') ElseIf参数='150200 '然后响应。写下('[')回应。写入(“cname”:“”青山区，' id'':''150201''}，')响应。写入(“cname”:“”东河区，' id'':''150202''} ')响应。写(']')结束如果结束如果%以上就是本文的全部内容，希望对大家的学习有所帮助。