在開發過程中，有時會遇到一咱情況：

兩個下拉框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
});
 

接下來我們要定義一個員工的下拉框：

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

這樣就可以了。