extJs 下拉框联动实现代码

// 第一个下拉框
var parentstore = new ext.data.store({
proxy: new ext.data.httpproxy({
url: 'loadbyparentid.action?parentid=1001'
}),
reader: new ext.data.jsonreader({
root: 'list',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc', mapping: 'name'}
])
});
// 第二个下拉框
var childstore = new ext.data.store({
proxy: new ext.data.httpproxy({
//这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的
url: 'loadbyparentid.action?parentid=1001'
}),
reader: new ext.data.jsonreader({
root: 'list',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc', mapping: 'name'}
])
});

{
fieldlabel: '请选择分类',
xtype:'combo',
store: parentstore,
valuefield :"id",
displayfield: "mc",
mode: 'local',
forceselection: true,//必须选择一项
emptytext:'请选择分类...',//默认值
hiddenname:'interviewsdetail.parent_category',//hiddenname才是提交到后台的input的name
editable: false,//不允许输入
triggeraction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggeraction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。
//allowblank:false,//该选项值不能为空
id : 'parent_id',
name: 'parent',
width: 400,
listeners:{
select : function(combo, record,index){
childstore.proxy= new ext.data.httpproxy({url: 'loadbyparentid.action?parentid=' + combo.value});
childstore.load();
}
}
},{
xtype:'combo',
store: childstore,
valuefield :"id",
displayfield: "mc",
//数据是在本地
mode: 'local',
forceselection: true,//必须选择一项
emptytext:'请选择子分类...',//默认值
hiddenname:'interviewsdetail.child_category',//hiddenname才是提交到后台的input的name
editable: false,//不允许输入
triggeraction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggeraction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。
//allowblank:false,//该选项值不能为空
fieldlabel: '选择',
id : 'child_id',
name: 'child',
width: 400
}