二级联动（省份城市）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>省份与城市联动的例子</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="ext/ext-all.css"> <script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all.js"></script> <!--<script type="text/javascript" src="citys.js" ></script> --> <script type="text/javascript"> var citys=[ ['北京',[['北京'],['通县'],['昌平'],['大兴'],['密云'],['延庆'],['顺义'],['怀柔'],['平谷'],['石景山'],['朝阳'],['西城'],['东城'],['丰台'],['宣武'],['崇文'],['海淀']]], ['上海',[['上海县'],['嘉定'],['松江'],['南汇'],['奉贤'],['川沙'],['青浦'],['崇明'],['金山']]], ['天津',[['蓟县'],['宝坻'],['武清'],['静海'],['宁河']]] ]; Ext.onReady(function(){ ////重载Grid的排序 applySort Ext.data.Store.prototype.applySort = function(){ //重载 applySort if(this.sortInfo && !this.remoteSort){ var s = this.sortInfo, f = s.field; var st = this.fields.get(f).sortType; var fn = function(r1, r2){ var v1 = st(r1.data[f]), v2 = st(r2.data[f]); // 添加:修复汉字排序异常的Bug if(typeof(v1) == "string"){ //若为字符串， return v1.localeCompare(v2);//则用 localeCompare 比较汉字字符串, Firefox 与 IE 均支持 } return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0); }; this.data.sort(s.direction, fn); if(this.snapshot && this.snapshot != this.data){ this.snapshot.sort(s.direction, fn); } } }; var provinceComBo=new Ext.form.ComboBox({ hiddenName:'province', name: 'province_name', valueField:"province", displayField:"province", mode:'local', fieldLabel: '所在省份', blankText:'请选择省份', emptyText:'请选择省份', editable:false, anchor:'90%', forceSelection:true, triggerAction:'all', store:new Ext.data.SimpleStore( { fields: ["province","city"], data:citys, sortInfo:{field:'province'} } ), listeners:{ select:function(combo, record, index){ /*select : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index ) Fires when a list item is selected Listeners will be called with the following arguments: * combo : Ext.form.ComboBox This combo box * record : Ext.data.Record The data record returned from the underlying store * index : Number The index of the selected item in the dropdown list */ cityCombo.clearValue(); cityCombo.store.loadData(record.data.city); } }, applyTo: 'provinceComBo' }) var cityCombo=new Ext.form.ComboBox({ hiddenName:'city', name:'city_name', valueField:"city", displayField:"city", mode:'local', fieldLabel: '所在城市', blankText:'请选择城市', emptyText:'请选择城市', editable:false, anchor:'90%', forceSelection:true, triggerAction:'all', store:new Ext.data.SimpleStore({fields: ["city"],data:[],sortInfo:{field:'city'}}), applyTo: 'cityCombo' }); }) </script> </head> <body> <input type="text" id="provinceComBo" size="20"/><input type="text" id="cityCombo" size="20"/> </body> </html>
效果如下：