(转)extJs combox 动态下拉框联动(级联)

首先,两个下拉框,第一个下拉框首先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({  
        url: '#'  
    }),  
    reader: new Ext.data.JsonReader({  
    root: 'list',  
    id: 'id'  
    }, [  
        {name: 'id', mapping: 'id'},  
        {name: 'mc', mapping: 'name'}  
    ])  
});
parentStore.load();

Ext.form.ComboBox({      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',      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(); } } });

    Ext.form.ComboBox({ xtype:
'combo', store: childStore, valueField :"id", displayField: "mc", //数据是在本地 mode: 'local', forceSelection: true,//必须选择一项 emptyText:'请选择子分类...',//默认值 hiddenName:'interviewsDetail.child_category',//hiddenName才是提交到后台的input的name editable: false,//不允许输入 triggerAction: 'all', fieldLabel: '选择', id : 'child_id', name: 'child',      width: 400 });

 

posted @ 2013-04-10 15:07  博宏  阅读(1091)  评论(0编辑  收藏  举报