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();
                 }
         }
};

/**
* 子类combox 注意这里的mode是定义为local(按常理是remote) 原因是不让这个组件在没有级联的关系下加载数据
*/
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);
                 });