在此感谢tianxiaode对我的帮助
page.html代码如下
<!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="../../../resources/css/ext-all.css">
<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext-all.js"></script>
<script type="text/javascript" src="../../../ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="city.js"></script>
<script>
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>city.js的代码var citys=[
['北京',[['北京'],['通县'],['昌平'],['大兴'],['密云'],['延庆'],['顺义'],['怀柔'],['平谷'],['石景山'],['朝阳'],['西城'],['东城'],['丰台'],['宣武'],['崇文'],['海淀']]],
['上海',[['上海县'],['嘉定'],['松江'],['南汇'],['奉贤'],['川沙'],['青浦'],['崇明'],['金山']]],
['天津',[['蓟县'],['宝坻'],['武清'],['静海'],['宁河']]]]