Ext ComboBox级联菜单方法

Js代码

1. var fatherType = new Ext.form.ComboBox({   
2.                   name:'fatherType',   
3.                   fieldLabel:"父级菜单",   
4.                  width : 150,   
5.                    triggerAction:"all",   
6.                  store : fatherTypeStroe,   
7.                   mode : 'remote', // local:从本地加载数据；remote:从服务器加载数据   
8.            eadOnly : false, // 如果设为true,则跟一般的下拉框一样，默认是false,可输入并自动匹配   
9.           triggerAction : 'all',   
10.                lazyInit : true,   
11.                valueField : 'code',   
12.                displayField : 'codeName',   
13.                 listeners:{   
14.                      "select":function(fatherType,record,index){   
15.                           var codeId = fatherType.getValue();   
16.                            childTypeStroe.load({params:{code:codeId}});  //childTypeStroe是子级菜单的Stroe，将所选父级菜单项的ID作为参数load子级菜单；   
17.                  var sd = formTest.findById("childType")  //从查询表单获取对象               
18.                    sd.setRawValue("");   //设置对象的当前值为空   
19.                                       
20.                     }                                  
21.                               }   
22.   
23.                            });  

var fatherType = new Ext.form.ComboBox({
                   name:'fatherType',
                   fieldLabel:"父级菜单",
                  width : 150,
                    triggerAction:"all",
                  store : fatherTypeStroe,
                   mode : 'remote', // local:从本地加载数据；remote:从服务器加载数据
            eadOnly : false, // 如果设为true,则跟一般的下拉框一样，默认是false,可输入并自动匹配
           triggerAction : 'all',
                lazyInit : true,
                valueField : 'code',
                displayField : 'codeName',
                 listeners:{
                       "select":function(fatherType,record,index){
                            var codeId = fatherType.getValue();
                            childTypeStroe.load({params:{code:codeId}});  //childTypeStroe是子级菜单的Stroe，将所选父级菜单项的ID作为参数load子级菜单；
                   var sd = formTest.findById("childType")  //从查询表单获取对象            
                    sd.setRawValue("");   //设置对象的当前值为空
                                     
                     }                               
                               }

                            });

        子类的Box

Java代码

1. var childType = new Ext.form.ComboBox({   
2.                                  id:'childType',   
3.                                  name:'n_childType',   
4.                                  fieldLabel:"子级菜单",   
5.                                  mode : 'local',   
6.                                  store : childTypeStroe,   //子类菜单Stroe   
7.                                  width:150,   
8.                                  triggerAction : 'all',   
9.                                 //readOnly : true,   
10.                                  valueField : 'code',   
11.                                  displayField : 'codeName',   
12.                                  listeners:{   
13.                                     "select":function(childType,record,index){    //如果还有下级菜单，同父类写法一样   
14.   
15.                                       }                                  
16.                                 }   
17.                              });  

var childType = new Ext.form.ComboBox({
                                id:'childType',
                                name:'n_childType',
                                fieldLabel:"子级菜单",
                                mode : 'local',
                                store : childTypeStroe,   //子类菜单Stroe
                                width:150,
                                triggerAction : 'all',
                                //readOnly : true,
                                valueField : 'code',
                                displayField : 'codeName',
                                listeners:{
                                    "select":function(childType,record,index){    //如果还有下级菜单，同父类写法一样

                                     }                               
                               }
                            });

父类的Stroe

Java代码

1. var fatherTypeStroe = new Ext.data.Store({   
2.             autoLoad : false,   
3.             proxy: new Ext.data.HttpProxy({url：}),    //这里传入自己的URL    返回所有的父节点项   
4.             reader: new Ext.data.JsonReader({   
5.                 totalProperty: 'rowCount',   
6.                 root: 'rows',   
7.                 id: 'id',   
8.                 fields: [   
9.                     {name: 'code'},   
10.                     {name: 'codeName'}   
11.                 ]   
12.             }),          
13.             listeners :{    // 给数据源添加监听器，做下拉框初始化   
14.                 load:function(){   
15.                      
16.                 }   
17.             }   
18.         });  

var fatherTypeStroe = new Ext.data.Store({
            autoLoad : false,
            proxy: new Ext.data.HttpProxy({url：}),    //这里传入自己的URL   返回所有的父节点项 
            reader: new Ext.data.JsonReader({
                totalProperty: 'rowCount',
                root: 'rows',
                id: 'id',
                fields: [
                    {name: 'code'},
                    {name: 'codeName'}
                ]
            }),       
            listeners :{    // 给数据源添加监听器，做下拉框初始化
                load:function(){ 
                   
                }
            }
        });

子类的Stroe

Js代码

1. var childTypeStroe = new Ext.data.Store({   
2.             autoLoad : false,   
3.             proxy: new Ext.data.HttpProxy({url：}),    //这里传入自己的URL    因为返回了父类的ID所以可以查询子类，具体在这里不再赘述   
4.             reader: new Ext.data.JsonReader({   
5.                 totalProperty: 'rowCount',   
6.                 root: 'rows',   
7.                 id: 'id',   
8.                 fields: [   
9.                     {name: 'code'},   
10.                     {name: 'codeName'}   
11.                 ]   
12.             }),          
13.             listeners :{    // 给数据源添加监听器，做下拉框初始化   
14.                 load:function(){   
15.                      
16.                 }   
17.             }   
18.         });  

 

来自: http://hi.baidu.com/zxlsky1314/blog/item/f0fa7d007045b9027bec2cff.html