EXTJS中，下拉框绑定事件，动态赋值

在开发过程中，有时会遇到一咱情况：

两个下拉框A和B，当选择A时，根据A的值查询B可以选择的值并赋值到B中。举个常见的例子，省份与城市两个下拉框，当选择省份后，城市的下拉框中只显示该省的城市。

要实现该功能最重要的就是一个下拉框的绑定事件而已。下边我以单位和员工关系为例。

有两个下拉框单位和员工，如图：

此时的员工下拉框为空，当选择单位以后，查询出该单位的员工列表并赋值到员工下拉框中，如图：

看完功能以后，我们现在来看看代码上是怎么实现的。

首先，定义一个单位下拉框：

var infoOfficesCombo = new Ext.form.ComboBox({
	 fieldLabel:'单位',
     store: infoOfficesStore,	//infoOfficesStore 可以是从数据库中查出，也可以是自己定义。
     mode:'local',
     triggerAction:'all',
     valueField:'chr_id',
     displayField:'chr_name',
     value:'',
     listeners: {	//监听事件
		select:function(){
		   infoUserStore.removeAll();	//将员工的store里边的内容清空
		   infoUserCombo.setValue('');	//将员工下拉框置为空
		   var userURL = path + "/search/getUserByOrgId.action?org_id=" + this.value;
           infoUserStore.proxy = new Ext.data.HttpProxy({url:userURL, method:'get'});
           infoUserStore.load();
		}
	 },
     editable:false
});

上边的userURL是我查询员工的地址，this.value可以当前下拉框选择的值（valueField定义的值，而不是显示的值：displayField）。

接下来我们要定义一个员工的下拉框：

//员工store
var infoUserData = {'totalCount':1,'rows':[{'name':'请先选择单位','sn':''}]}
infoUserStore = new Ext.data.JsonStore({
	root:"rows", 
	totalProperty:"totalCount", 
	fields:['sn','name'],
	data:infoUserData
});
//员工组件
var infoUserCombo = new Ext.form.ComboBox({
	 id: 'infoUserCombo',
	 fieldLabel:'员工',
     store: infoUserStore,
     mode:'local',
     triggerAction:'all',
     valueField:'id',
     displayField:'name',
     value:'',
     editable:false
});

定义员工下拉框需要主意以下几点：

1. infoUserStore（员工store）需要在文件首声明，这样才能在单位下拉框的监听事件中重新赋值。

2. infoUserStore（员工store）必要声明为Ext.data.JsonStore类型，而不能使用Ext.data.SimpleStore类型，否则在监听事件中无法将查询的结果赋值给它。所以infoUserData也要写成json形式。

这样就可以了。