extjs中 combobox级联

关键字: extjs, combobox, 级联

1、首先定义store

Js代码

1. //**测试下拉框级联**   
2.  var storedm = new Ext.data.Store({   //队名称下拉框   
3.      proxy: new Ext.data.HttpProxy({      
4.          url: '../servlet/CommonMethod?command=getdm'     
5.      }),      
6.      reader: new Ext.data.JsonReader({      
7.      root: 'dms',      
8.      id: 'id'  
9.      }, [      
10.          {name: 'id', mapping: 'id'},      
11.          {name: 'mc', mapping: 'mc'}      
12.      ])      
13.     });    
14.        
15.     var storejh = new Ext.data.Store({  //井号选择下拉框   
16.      proxy: new Ext.data.HttpProxy({      
17.          url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的   
18.      }),      
19.      reader: new Ext.data.JsonReader({      
20.      root: 'jhs',      
21.      id: 'jh'     
22.      }, [      
23.          {name: 'jh', mapping: 'jh'},      
24.          {name: 'jm', mapping: 'jm'}      
25.      ])      
26.     });  

//**测试下拉框级联**
 var storedm = new Ext.data.Store({   //队名称下拉框
     proxy: new Ext.data.HttpProxy({   
         url: '../servlet/CommonMethod?command=getdm'  
     }),   
     reader: new Ext.data.JsonReader({   
     root: 'dms',   
     id: 'id'
     }, [   
         {name: 'id', mapping: 'id'},   
         {name: 'mc', mapping: 'mc'}   
     ])   
    }); 
    
    var storejh = new Ext.data.Store({  //井号选择下拉框
     proxy: new Ext.data.HttpProxy({   
         url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的
     }),   
     reader: new Ext.data.JsonReader({   
     root: 'jhs',   
     id: 'jh'  
     }, [   
         {name: 'jh', mapping: 'jh'},   
         {name: 'jm', mapping: 'jm'}   
     ])   
    });

 2、然后定义ComboBox

Js代码

1. //单位字段   
2.    var dwField = new Ext.form.ComboBox({   
3.     fieldLabel:'所属队',   
4.     name:'DW',   
5.     //hiddenName:'DW',//hiddenName才是提交到后台的input的name（既select的value值）      
6.     allowBlank:false,   
7.     mode: 'local',   
8.     readOnly:true,   
9.     triggerAction:'all',   
10.     anchor:'90%',   
11.     emptyText:'请选择...',//默认值      
12.     store:storedm,   
13.     listeners:{        
14.            select : function(combo, record,index)   
15.            {      
16.             jhField.clearValue(); //可以实现当队下拉值变更时，清空之前井号下拉选项中的值   
17.                
18.            storejh.proxy= new Ext.data.HttpProxy({url: '../servlet/CommonMethod?command=' + combo.value}); //根据队下拉选项的改变，动态取出对应的井   
19.                   
20.            storejh.load(); //加载井下拉框的store      
21.            }      
22.        },   
23.        listClass: 'x-combo-list-small', //测试的属性   
24.        lastQuery:'', //测试的属性   
25.     valueField: 'id',   
26.     displayField: 'mc'  
27. });   
28.   
29. storedm.load(); //载入队下拉框的信息   
30.   
31. //井号字段   
32.    var jhField = new Ext.form.ComboBox({      
33.        xtype:'combo',      
34.        store: storejh,      
35.        valueField :"jh",      
36.        displayField: "jm",      
37.        //数据是在本地      
38.        mode: 'local',      
39.        //forceSelection: true,//必须选择一项      
40.        emptyText:'请选择井号...',//默认值      
41.        hiddenName:'JH',//hiddenName才是提交到后台的input的name（既select的value值）      
42.        editable: false,//不允许输入      
43.        triggerAction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。      
44.        allowBlank:false,//该选项值不能为空      
45.        fieldLabel: '井号',      
46.        id : 'jh_id',      
47.        name: 'JH',      
48.        anchor:'90%'     
49.    });