《Extjs4.0 ComboBox如何实现三级联动_.docx》由会员分享，可在线阅读，更多相关《Extjs4.0 ComboBox如何实现三级联动_.docx（12页珍藏版）》请在三一文库上搜索。
1、Extjs4.0 ComboBox如何实现三级联动_ 许多网友在问，Extjs4.0 ComboBox如何实现，好在之前用3.x实现过一个三级联动，如今用Extjs4.0来实现同样的联动效果。其中留意的一点就是，3.x中的model:local在Extjs4.0中用queryMode: local来表示，而且在3.x中Load数据时用reload，但是在extjs4.0中要用法load来猎取数据。如下图： 代码部分 先看HTML代码： html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleM
2、HZG.NET-城市三级联动实例/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 简洁的很，就是加
3、载了基本的CSS文件和JS文件，并且加载自定义的combobox.js文件。 combobox.js： Ext.require(Ext.*); Ext.onReady(function() /定义ComboBox模型 Ext.define(State, extend: Ext.data.Model, fields: type: int, name: id, type: string, name: cname ); /加载省数据源 var store = Ext.create(Ext.data.Store, model: State, proxy: type: ajax, url: city.a
4、sp?act=shengn=+new Date().getTime()+ , autoLoad: true, remoteSort:true ); /加载市数据源 var store1 = Ext.create(Ext.data.Store, model: State, proxy: type: ajax, url: city.asp?act=shin=+new Date().getTime()+ , autoLoad: false, remoteSort:true ); /加载区数据源 var store2 = Ext.create(Ext.data.Store, model: State,
5、 proxy: type: ajax, url: city.asp?act=qun=+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, body
6、Padding: 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 : 请选择省, listeners: select:function(comb
7、o, 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(错误,数据加载失败。); , xtype:combo, name:shi, id : shi, fieldLabel:选择市, displayFie
8、ld:cname, valueField:id, store:store1, triggerAction:all, queryMode: local, selectOnFocus:true, forceSelection: true, allowBlank:false, editable: true, emptyText:请选择市, blankText : 请选择市, listeners: select:function(combo, record,index) try /userAdd = record.data.name; var parent = Ext.getCmp(qu); pare
9、nt.clearValue(); parent.store.load(params: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,
10、editable: true, emptyText:请选择区, blankText : 请选择区, ) ); 上述代码中，假如在ComboBox挺直定义store数据源，会消失这样一种状况，那就是当选择完第一个省，点击其次个市的时候，会闪一下，再点击，才会消失市的数据。那么要解决这样的状况，那么必需先要定义好省、市、区的数据源。那么再点击的时候，就不会消失上述状况了。 代码中，用法store为省的数据，设置其autoLoad为true，那么页面第一次加载的时候，就会自动加载省的数据，然后给省和市添加了监听select，作用在于当点击省的时候，要清空市和区的数据，并依据当前选定的值去加载对应的数
11、据到市的数据源中。当然store1和store2原理是一样的。 最终，服务端要依据传的值进行数据检索及返回正确数据，这里没有从数据库中查询数据，而只是简洁的写了一些测试代码，信任extjs代码没有任何的问题了，那么服务端返回数据，就不是一件很重要的事情了。 City.asp： %LANGUAGE=VBSCRIPT CODEPAGE=65001% % Response.ContentType = text/html Response.Charset = UTF-8 % % Dim act:act = Request(act) Dim param : param = Request(param)
12、If act = sheng Then Response.Write() Response.Write(cname:北京市,id:110000,) Response.Write(cname:内蒙古自治区,id:150000) Response.Write() End If If act = shi Then If param = 110000 Then Response.Write() Response.Write(cname:市辖区,id:110100,) Response.Write(cname:市辖县,id:110200) Response.Write() ElseIf param =
13、150000 Then Response.Write() Response.Write(cname:呼和浩特市,id:150100,) Response.Write(cname:包头市,id:150200) Response.Write() End If End If If act = qu Then If param = 110100 Then Response.Write() Response.Write(cname:朝阳区,id:110101,) Response.Write(cname:昌平区,id:110102) Response.Write() ElseIf param = 110
14、200 Then Response.Write() Response.Write(cname:密云县,id:110201,) Response.Write(cname:房山县,id:110202) Response.Write() ElseIf param = 150100 Then Response.Write() Response.Write(cname:回民区,id:150101,) Response.Write(cname:新城区,id:150102) Response.Write() ElseIf param = 150200 Then Response.Write() Response.Write(cname:青山区,id:150201,) Response.Write(cname:东河区,id:150202) Response.Write() End If End If % 以上就是本文的全部内容，盼望对大家的学习有所关心。 .