extjs中 combobox级联

关键字: extjs, combobox, 级联

1、首先定义store

//**测试下拉框级联**
 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'}
     ])
    });

//**测试下拉框级联**
 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

//单位字段
   var dwField = new Ext.form.ComboBox({
    fieldLabel:'所属队',
    name:'DW',
    //hiddenName:'DW',//hiddenName才是提交到后台的input的name（既select的value值）
    allowBlank:false,
    mode: 'local',
    readOnly:true,
    triggerAction:'all',
    anchor:'90%',
    emptyText:'请选择...',//默认值
    store:storedm,
    listeners:{
           select : function(combo, record,index)
           {
            jhField.clearValue(); //可以实现当队下拉值变更时，清空之前井号下拉选项中的值

           storejh.proxy= new Ext.data.HttpProxy({url: '../servlet/CommonMethod?command=' + combo.value}); //根据队下拉选项的改变，动态取出对应的井

           storejh.load(); //加载井下拉框的store
           }
       },
       listClass: 'x-combo-list-small', //测试的属性
       lastQuery:'', //测试的属性
    valueField: 'id',
    displayField: 'mc'
});

storedm.load(); //载入队下拉框的信息

//井号字段
   var jhField = new Ext.form.ComboBox({
       xtype:'combo',
       store: storejh,
       valueField :"jh",
       displayField: "jm",
       //数据是在本地
       mode: 'local',
       //forceSelection: true,//必须选择一项
       emptyText:'请选择井号...',//默认值
       hiddenName:'JH',//hiddenName才是提交到后台的input的name（既select的value值）
       editable: false,//不允许输入
       triggerAction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。
       allowBlank:false,//该选项值不能为空
       fieldLabel: '井号',
       id : 'jh_id',
       name: 'JH',
       anchor:'90%'
   });