EXT下拉框联动

extJs之下拉框联动  

在ext的世界里面,我重新感受到了在学校里玩swing的记忆.那时我们都需要为一个控件创建一个数据源,在把这个数据源绑定在控件上.ext也是如此.

首先,两个下拉框,第一个下拉框首先load数据源,在select的事件中在load第二个数据源,这就是一个简单的二级联动的实现原理了.

Js代码 
//  第一个下拉框   
var parentStore = new Ext.data.Store({   
    proxy: new Ext.data.HttpProxy({   
        url: 'loadByParentid.action?parentid=1001'  
    }),   
    reader: new Ext.data.JsonReader({   
    root: 'list',   
    id: 'id'  
    }, [   
        {name: 'id', mapping: 'id'},   
        {name: 'mc', mapping: 'name'}   
    ])   
});    
//     第二个下拉框   
var childStore = new Ext.data.Store({   
    proxy: new Ext.data.HttpProxy({   
                       //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的   
        url: 'loadByParentid.action?parentid=1001'  
    }),   
    reader: new Ext.data.JsonReader({   
    root: 'list',   
    id: 'id'  
    }, [   
        {name: 'id', mapping: 'id'},   
        {name: 'mc', mapping: 'name'}   
    ])   
});    
  
      {   
    fieldLabel: '请选择分类',   
           xtype:'combo',   
           store: parentStore,   
           valueField :"id",   
           displayField: "mc",   
           mode: 'local',   
           forceSelection: true,//必须选择一项   
           emptyText:'请选择分类...',//默认值   
           hiddenName:'interviewsDetail.parent_category',//hiddenName才是提交到后台的input的name   
           editable: false,//不允许输入   
           triggerAction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。   
           //allowBlank:false,//该选项值不能为空   
    id : 'parent_id',   
           name: 'parent',   
        width: 400,   
        listeners:{     
            select : function(combo, record,index){   
                childStore.proxy= new Ext.data.HttpProxy({url: 'loadByParentid.action?parentid=' + combo.value});   
                    childStore.load();    
            }   
        }   
       },{   
           xtype:'combo',   
           store: childStore,   
           valueField :"id",   
           displayField: "mc",   
    //数据是在本地   
           mode: 'local',   
           forceSelection: true,//必须选择一项   
           emptyText:'请选择子分类...',//默认值   
           hiddenName:'interviewsDetail.child_category',//hiddenName才是提交到后台的input的name   
           editable: false,//不允许输入   
           triggerAction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。   
           //allowBlank:false,//该选项值不能为空   
           fieldLabel: '选择',   
           id : 'child_id',   
           name: 'child',   
    width: 400   
       }