Ext下拉列表
一.一级下拉列表
?
1. 一级下拉列表框本地初始化
?
二级数组自动匹配value和text，初始化value值时会自动选中相应选项
items : [{xtype : 'combo',fieldLabel : '预警级别',id : 'warningLevel',store :[[1,'1级'],[2,'2级'],[3,'3级']], width:100,value:'',triggerAction: "all",mode: "local",allowBlank:false}]?
2.一级下拉列表远程数据获取
var libStore = new Ext.data.Store({proxy : new Ext.data.HttpProxy({url : /searchSmisInstitutionList.do'}),reader : new Ext.data.JsonReader({root : "data"}, [{name : "className"}, {name : "smisInstitutionClassId"}])});var libCombo = new omgComboBox({store : libStore,emptyText : "请选择",editable : false,id : "smisInstitutionClassId",fieldLabel : "制度库分类",hiddenName : "smisInstitutionClass.smisInstitutionClassId",displayField : "className",valueField : "smisInstitutionClassId",value : "",width : 200,triggerAction : "all",allowBlank:false,mode : "remote"});?
注：displayField为显示的字段名称，valueField为提交到后台的字段值，
?????? hiddenName为提交到后台的表单参数名称。
?????? Editable若为true时则下拉列表可输入，一般适用于搜索的场所，后台需进行模糊匹配查询。
?
二.?二级下拉列表
?
?1. 二级下拉列表本地数据初始化
var citys=[ ['北京',[['北京'],['通县'],['昌平'],['大兴'],['密云'],['延庆']]], ['上海',[['上海县'],['嘉定'],['松江'],['南汇'],['奉贤'],['金山']]], ['天津',[['蓟县'],['宝坻'],['武清'],['静海'],['宁河']]]];// 省份var provinceComBo=new Ext.form.ComboBox({hiddenName:'province',name: 'province_name',valueField:"province",displayField:"province",mode:'local',fieldLabel: '所在省份',blankText:'请选择省份',emptyText:'请选择省份',editable:false,anchor:'90%',forceSelection:true,triggerAction:'all',store:new Ext.data.SimpleStore({fields: ["province","city"],data:citys,sortInfo:{field:'province'}}),listeners:{select:function(combo, record, index){cityCombo.clearValue();cityCombo.store.loadData(record.data.city);}}});// 城市var cityCombo=new Ext.form.ComboBox({hiddenName:'city',name:'city_name',valueField:"city",displayField:"city",mode:'local',fieldLabel: '所在城市',blankText:'请选择城市',emptyText:'请选择城市', editable:false,anchor:'90%',forceSelection:true,triggerAction:'all',store:new Ext.data.SimpleStore({fields: ["city"], data:[], sortInfo:{field:'city'}}),});?
2.二级下拉列表远程数据获取
// 一级Ext.form.regieOrgCombo = Ext.extend(Ext.form.ComboBox,{ displayField: 'regieOrgName',valueField: 'regieOrgCode',triggerAction: 'all', mode:'local',emptyText: '请选择',editable:false, selectOnFocus:true,store: new Ext.data.Store({proxy: new Ext.data.DWRProxy(rmRegieOrgService.getRmRegieOrgByPersonCode),reader: new Ext.data.ListRangeReader({ totalProperty: 'totalCount', root: 'items', id:'regieOrgCode'}, new Ext.data.Record.create([ {name: 'regieOrgCode', mapping: 'regieOrgCode'}, {name: 'regieOrgName',mapping: 'regieOrgName'} ]) )})});// 二级Ext.form.regieOrgDeptCombo = Ext.extend(Ext.form.ComboBox,{ displayField: 'regieDeptName',valueField: 'regieDeptCode',triggerAction: 'all', mode:'local',emptyText: '请选择',editable:false, selectOnFocus:true,store: new Ext.data.Store({proxy: new Ext.data.DWRProxy(rmRegieDeptService.getRmRegieDeptByRegieOrgCode),reader: new Ext.data.ListRangeReader({ totalProperty: 'totalCount', root: 'items', id:'regieDeptCode'}, new Ext.data.Record.create([ {name: 'regieDeptCode', mapping: 'regieDeptCode'}, {name: 'regieDeptName',mapping: 'regieDeptName'}]))}) });// 一级下拉列表应用var regieOrgCombo = new Ext.form.regieOrgCombo({fieldLabel:'专卖局',width: 100,listWidth:150,id:'regieOrgCombo'}); // 一级下拉列表选择完清除二级下拉列表内容，二级下拉列表重新加载。regieOrgCombo.addListener('select',function(combo, comboRecord, index){ clearCombo('regieOrgDeptCombo','regieDeptCode'); regieOrgDeptCombo.store.reload(); });//二级下拉列表应用var regieOrgDeptCombo = new Ext.form.regieOrgDeptCombo({ id:'regieOrgDeptCombo', fieldLabel:'专管所',width: 100 }); // 二级下拉列表加载前先获取一级下拉列表选中的内容regieOrgDeptCombo.getStore().on('beforeload',function(){ var regieOrgCode = regieOrgCombo.getValue(); Ext.apply(this.baseParams,{regieOrgCode:regieOrgCode}); });?