Ext之级联ComboBox

/**
* 定义store,在baseParams中定义参数，请求服务端数据，返回数据源
*/
var modelsStore = new Ext.data.JsonStore({
url : 'cars-makes-models.action',
baseParams : {
cmd : 'models'
},
root : 'models',
fields : ['id', 'name']
});

/**
*
* makeCombo 父类combox 控制自身store的加载， 以及modelStore的加载 通过select触发事件，去级联modelStore
*/

var MakeCombo = {
xtype : 'combo',
store : makestore,
displayField : 'name',
valueField : 'id',
typeAhead : true,
editable : false,
mode : 'remote',
forceSelection : true,
triggerAction : 'all',
fieldLabel : 'Make',
emptyText : 'Select a make...',
selectOnFocus : true,
anchor : '95%',
store : new Ext.data.JsonStore({
url : 'cars-makes-models.action',
baseParams : {
cmd : 'makes'
},
root : 'makes',
fields : ['id', 'name']
}),
listeners : {
'select' : function(cmb, rec, idx) {
// 得到models-combo组件
modelsCbx = Ext.getCmp('models-combo');
// 清除数据
modelsCbx.clearValue();
// 通过传入自身参数使modelStore重新加载
modelsCbx.store.load({
params : {
'makeId' : this.getValue()
}
});
// 启用组件
modelsCbx.enable();
}
}
};

[color=red][b]/**
* 子类combox 注意这里的mode是定义为local(按常理是remote) 原因是不让这个组件在没有级联的关系下加载数据
*/[/b] [/color]
var ModelCombo = {
xtype : 'combo',
id : 'models-combo',
store : modelsStore,
displayField : 'name',
valueField : 'id',
typeAhead : true,
editable : false,
mode : 'local',
forceSelection : true,
triggerAction : 'all',
fieldLabel : 'Model',
emptyText : 'Select a model...',
selectOnFocus : true,
disabled : true,
anchor : '95%'
};

/**
* 初始化面板
*/

Ext.onReady(function() {
var newCarForm = new Ext.FormPanel({
frame : true,
title : 'Car Reviews',
bodyStyle : 'padding:5px',
width : 420,
id : 'make-selector-frm',
url : 'new-car.php',
items : [MakeCombo, ModelCombo]
});
newCarForm.render(document.body);
});