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/RoleService.ashx?Method=GetAllRoles"
???????????
}),
??????????? reader: new Ext.data.JsonReader({
??????????????? root:
'Table',
??????????????? totalProperty: 'RecordCount',
??????????????? id:
'RoleId',
??????????????? fields: ['RoleId', 'RoleName']
???????????
})
??????? });
??????? comboxStore.load();
??????? //角色下拉框
???????
var roleCombox = new Ext.form.ComboBox({
??????????? id:
'rCombox',
??????????? //xtype: 'combo',
??????????? fieldLabel:
'所属角色',
??????????? emptyText: '请选择所属角色',
??????????? name:
'RoleName',
??????????? anchor: '98%',
??????????? store:
comboxStore,
??????????? displayField: 'RoleName',
??????????? valueField:
'RoleId',
??????????? hiddenName: 'RoleId',
??????????? typeAhead:
true,
??????????? mode: 'remote',
??????????? triggerAction:
'all',
??????????? selectOnFocus: true,
??????????? blankText:
'角色不能为空',
??????????? allowBlank: false,
??????????? editable:
false
??????? });
3.comboBox在表单中提交值的问题
有如下两种方法:
1.params: { RoleId: Ext.getCmp('rCombox').getValue() }
通过params传 getValue()取到的是valueField中的值
2.通过配置hiddenName,来保存valueField中的值,否则将提交name属性中的值即dispalyField的值
4.参数介绍
mode:数据来源方式 local本地 remote 表示从服务器读取数据
selectOnFocus:值为 ture 时表示字段获取焦点时自动选择字段既有文本
editable:true表示可以编辑