extjs combobox省市县3级联动示例
extjs combobox省市县3级联动示例，示例居于ext-4.1.1a，4+版本应该不会出错，3-自己注意修改store的创建模式，3+和4+是extjs的分水岭，store创建基本完全不一样，自己对照api修改如果需要兼容3-版本的extjs。
extjs combobox省市县3级联动示例源代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extjs combobox省市县3级联动示例</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
var arrPro = [{ t: '北京', id: 1 }, { t: '上海', id: 2 }, { t: '广西', id: 3 }]
//市数据结构，为json数组对象。数组小标为省的id，数组项为市json数据。。
var arrCity = [];
arrCity[1] = [{ t: '北京市', id: 1 }];
arrCity[2] = [{ t: '上海市', id: 2 }];
arrCity[3] = [{ t: '南宁市', id: 3 }, { t: '桂林市', id: 4 }, { t: '柳州市', id: 5 }];
//如果还有县的联动，同理生成arrTown即可
var arrTown = [];
arrTown[1] = [{ t: '东城区', id: 1 }, { t: '海淀区', id: 2 }]
arrTown[2] = [{ t: '黄埔区', id: 4 }, { t: '静安区', id: 5 }]
arrTown[3] = [{ t: '青秀区', id: 6 }]
arrTown[4] = [{ t: '七星区', id: 7 }, { t: '象山区', id: 8 }, { t: '秀峰区', id: 9 }]
arrTown[5] = [{ t: '鱼峰区', id: 10 }, { t: '拉堡', id: 11 }]
Ext.onReady(function () {
Ext.define('Area', { extend: 'Ext.data.Model', fields: [{ name: 't' }, { name: 'id' }] });
Ext.create('Ext.panel.Panel', {
title: 'extjs combobox省市县3级联动示例',
width: 500,
frame: true,
layout: { type: 'table', columns: 6, tdAttrs: { valign: 'top' } },
defaults: { bodyStyle: 'padding:5px;background-color:transparent;border:none' },
items: [{
html: '省：',
}, {
xtype: 'combobox', width: 100, queryMode: 'local', displayField: 't', valueField: 'id',id:'cbPro',
store: Ext.create('Ext.data.Store', { model: 'Area' }),
value:3,//默认值，实际应用从数据库中读取
listeners: {
//显示后加载数据并且触发chagne事件加载市
afterrender: function (el, opts) {
el.getStore().loadData(arrPro);
var value = el.getValue();
//重新设置过值，要不loadData后上面配置的value直接显示而不是显示对应的text
el.setValue(value).fireEvent('change', el, value, 'init');
},
change: function (el, nv, ov, opts) {
Ext.getCmp('cbCity').getStore().loadData(arrCity[nv]);
if (ov !== 'init') Ext.getCmp('cbCity').setValue('...')
}
}
}, {
html: '市'
}, {
xtype: 'combobox', width: 100, queryMode: 'local', displayField: 't', valueField: 'id',id:'cbCity',
store: Ext.create('Ext.data.Store', { model: 'Area' }),
value: 4,//默认值，实际应用从数据库中读取
listeners: {
//显示后加载数据并且触发chagne事件加载县
afterrender: function (el, opts) {
el.getStore().loadData(arrCity[Ext.getCmp('cbPro').getValue()]);
var value = el.getValue();
//重新设置过值，要不loadData后上面配置的value直接显示而不是显示对应的text
el.setValue(value).fireEvent('change', el, value, 'init');
},
change: function (el, nv, ov, opts) {
Ext.getCmp('cbTown').getStore().loadData(arrTown[nv]);
if (ov !== 'init') Ext.getCmp('cbTown').setValue('...')
}
}
}, {
html: '县'
}, {
xtype: 'combobox', width: 100, queryMode: 'local', displayField: 't', valueField: 'id', id: 'cbTown',
store: Ext.create('Ext.data.Store', { model: 'Area' }),
value: 7,//默认值，实际应用从数据库中读取
listeners: {
afterrender: function (el, opts) {
el.getStore().loadData(arrTown[Ext.getCmp('cbCity').getValue()]);
var value = el.getValue();
//重新设置过值，要不loadData后上面配置的value直接显示而不是显示对应的text
el.setValue(value)
}
}
}],
renderTo: Ext.getBody()
});
})
</script>
</head>
<body>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：extjs combobox省市县3级联动示例