ExtJs的ComboBox级联实现(转)

ExtJs的ComboBox级联实现

1、首先定义store

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

Js代码
//单位字段 ??
???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%'?? ??
???});

//设置ComboBox列表数据源参数
??????? var comboxStore = new Ext.data.Store({
??????????? proxy: new Ext.data.HttpProxy({
??????????????? url: "http://www.cnblogs.com/Service/SystemService/Role