ExtJS4.1 下拉菜单(combobox)联动『精选代码』

注意：此文章只适用于ExtJS4.1，如果你使用ExtJS4.0版本，此效果会有BUG，详见：

http://www.sencha.com/forum/showthread.php?153490-Combo-Box-Store-Loading

一级下拉框代码：

Ext.define('type_combo', { 
    extend : 'Ext.form.field.ComboBox', 
    fieldLabel : '类型', 
    editable : false, 
    queryMode : 'local', 
    store: new Ext.data.Store({ 
        proxy: { 
                type : 'ajax', 
                url : action_url
        }, 
        fields : ['abbr', 'name'],
        autoLoad : true 
    }), 
    valueField : 'abbr', 
    displayField : 'name', 
    listeners : { 
        select : function(combo,records,options){ 
            Ext.getCmp('ds_combo').clearValue(); 
            var store = Ext.data.StoreManager.lookup('ds_store'); 
            store.load({
               params:{
                  id : combo.getValue()
               }
            }); 
        } 
    }
});

注：监听代码里面的id要跟action里面的request.getParameter("id")一致

二级下拉框代码：

Ext.define('data_combo', { 
    extend: 'Ext.form.field.ComboBox', 
    id:'ds_combo', 
    fieldLabel: '名称', 
    editable:false, 
    queryMode:'local', 
    store: new Ext.data.Store({ 
        storeId:'ds_store', 
        proxy: { 
                type: 'ajax', 
                url : action_url
        }, 
        fields: ['abbr', 'name'],
        autoLoad:true 
    }), 
    valueField:'abbr', 
    displayField:'name' 
}); 

Action返回值形式：

@ResponseBody
public JSONArray getData(HttpServletRequest request) {
	String idStr = request.getParameter("id");
	.......
	JSONArray list = new JSONArray();
	.......
	JSONObject obj = new JSONObject();
	obj.put("abbr", da.getId());
	obj.put("name", da.getName());
	list.add(obj);
	.......
	return list;
}

注：如果上面的下拉框中fields格式改变，action里面的put内也要相应改变。