Extjs之combobox联动

Ext.Loader.setConfig({
enabled : true
});
Ext.Loader.setPath('Ext.ux', '../extjs/ux');
Ext.require([ 'Ext.form.*', 'Ext.data.*', 'Ext.grid.Panel' ]);

Ext.onReady(function() {
Ext.QuickTips.init();
var bodyWidth;
var bodyHeight;
var panelWidth = bodyWidth;
var panelHeight = bodyHeight;

Ext.define('com_data', {
extend: 'Ext.data.Model',
fields: [ 'id', 'name' ]
});

var com1_store = Ext.create('Ext.data.Store', {
autoDestroy: true,
fields: ['com1id','com1name'],
data: [{
'com1id':"1",
'com1name':"北京"
},{
'com1id':"2",
'com1name':"河北"
},{
'com1id':"3",
'com1name':"内蒙古"
}]
});

var com2_store = Ext.create('Ext.data.Store', {
autoDestroy: true,
model: 'com_data'
});

var myPanel = Ext.create('Ext.panel.Panel', {
id: 'myPanel',
name: 'myPanel',
width: panelWidth,
height: panelHeight,
title: 'Extjs嵌入html',
bodyPadding: '10 10 10 10',
items: [{
xtype: 'combobox',
id: 'com1',
name: 'com1',
store: com1_store,
valueField: 'com1id',
displayField: 'com1name',
queryMode: 'local',
fieldLabel: '请选择地区',
width: 200,
labelWidth: 100,
listeners: {
change: function(){//匿名函数
var com1id = Ext.getCmp("com1").getValue();
com2_store.removeAll(false);
if(com1id == "1"){
var data1 = Ext.create('com_data', {
id: '1',
name: '海淀区'
});
com2_store.add(data1);
var data2 = Ext.create('com_data', {
id: '2',
name: '朝阳区'
});
com2_store.add(data2);
var data3 = Ext.create('com_data', {
id: '3',
name: '丰台区'
});
com2_store.add(data3);
} else if(com1id == "2"){
var data1 = Ext.create('com_data', {
id: '1',
name: '石家庄'
});
com2_store.add(data1);
var data2 = Ext.create('com_data', {
id: '2',
name: '保定市'
});
com2_store.add(data2);
var data3 = Ext.create('com_data', {
id: '3',
name: '邯郸市'
});
com2_store.add(data3);
} else if(com1id == "3"){
var data1 = Ext.create('com_data', {
id: '1',
name: '呼和浩特市'
});
com2_store.add(data1);
var data2 = Ext.create('com_data', {
id: '2',
name: '赤峰市'
});
com2_store.add(data2);
var data3 = Ext.create('com_data', {
id: '3',
name: '包头市'
});
com2_store.add(data3);
} else {
//空
}
}
}
}, {
xtype: 'combobox',
id: 'com2',
name: 'com2',
store: com2_store,
valueField: 'id',
displayField: 'name',
queryMode: 'local',
fieldLabel: '请选择城市',
width: 200,
labelWidth: 100
}]
});
myPanel.render(document.body);

Ext.onDocumentReady(function() {
//gridstoreLoad();
});

window.onresize=function(){
bodyHeight = window.innerHeight?(window.innerHeight<600?600:window.innerHeight):document.documentElement.clientHeight;
bodyWidth = window.innerWidth?window.innerWidth:document.body.offsetWidth;
};

});

上面的方式是通过选择下拉框1的值改变下拉框2的值，在下拉框1改变时通过store的add方法添加下拉框2要显示的值，也可以通过获得下拉框1的值使用store的load的方法到后台查找下拉框2要显示的值。

效果：