extJs之下拉框联动

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

Js代码

1. //  第一个下拉框  
2. var parentStore = new Ext.data.Store({  
3.     proxy: new Ext.data.HttpProxy({  
4.         url: 'loadByParentid.action?parentid=1001'  
5.     }),  
6.     reader: new Ext.data.JsonReader({  
7.     root: 'list',  
8.     id: 'id'  
9.     }, [  
10.         {name: 'id', mapping: 'id'},  
11.         {name: 'mc', mapping: 'name'}  
12.     ])  
13. });   
14. //     第二个下拉框  
15. var childStore = new Ext.data.Store({  
16.     proxy: new Ext.data.HttpProxy({  
17.                        //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的  
18.         url: 'loadByParentid.action?parentid=1001'  
19.     }),  
20.     reader: new Ext.data.JsonReader({  
21.     root: 'list',  
22.     id: 'id'  
23.     }, [  
24.         {name: 'id', mapping: 'id'},  
25.         {name: 'mc', mapping: 'name'}  
26.     ])  
27. });   
28.   
29.       {  
30.     fieldLabel: '请选择分类',  
31.            xtype:'combo',  
32.            store: parentStore,  
33.            valueField :"id",  
34.            displayField: "mc",  
35.            mode: 'local',  
36.            forceSelection: true,//必须选择一项  
37.            emptyText:'请选择分类...',//默认值  
38.            hiddenName:'interviewsDetail.parent_category',//hiddenName才是提交到后台的input的name  
39.            editable: false,//不允许输入  
40.            triggerAction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。  
41.            //allowBlank:false,//该选项值不能为空  
42.     id : 'parent_id',  
43.            name: 'parent',  
44.         width: 400,  
45.         listeners:{    
46.             select : function(combo, record,index){  
47.                 childStore.proxy= new Ext.data.HttpProxy({url: 'loadByParentid.action?parentid=' + combo.value});  
48.                     childStore.load();   
49.             }  
50.         }  
51.        },{  
52.            xtype:'combo',  
53.            store: childStore,  
54.            valueField :"id",  
55.            displayField: "mc",  
56.     //数据是在本地  
57.            mode: 'local',  
58.            forceSelection: true,//必须选择一项  
59.            emptyText:'请选择子分类...',//默认值  
60.            hiddenName:'interviewsDetail.child_category',//hiddenName才是提交到后台的input的name  
61.            editable: false,//不允许输入  
62.            triggerAction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。  
63.            //allowBlank:false,//该选项值不能为空  
64.            fieldLabel: '选择',  
65.            id : 'child_id',  
66.            name: 'child',  
67.     width: 400  
68.        }  

 //	第一个下拉框
	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
        }

 

这样就大功告成了.