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="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="city.js"></script>
<script type="text/javascript">
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",
//从哪里读取数据(local从本地读取数据,remote从服务器读取数据)
mode:'local',
//标签显示的内容
fieldLabel: '所在省份',
//没有输入时显示的内容
blankText:'请选择省份',
//预设文字
emptyText:'请选择省份',
//是否可编辑
editable:false,
//固定百分比
anchor:'90%',
//固定选择项
forceSelection:true,
//触发动作
triggerAction:'all',
//数据源
store:new Ext.data.SimpleStore(
{
//js中表示的数据格式
fields: ["province","city"],
//js中数据源名称
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=[
['北京',[['北京'],['通县'],['昌平'],['大兴'],['密云'],['延庆'],['顺义'],['怀柔'],['平谷'],['石景山'],['朝阳'],['西城'],['东城'],['丰台'],['宣武'],['崇文'],['海淀']]],
['上海',[['上海县'],['嘉定'],['松江'],['南汇'],['奉贤'],['川沙'],['青浦'],['崇明'],['金山']]],
['天津',[['蓟县'],['宝坻'],['武清'],['静海'],['宁河']]]]
EXT 二级联动下拉列表
最新推荐文章于 2021-02-25 07:49:59 发布