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）。

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

//员工storevar 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形式。

这样就可以了。