下拉列表

 

一.一级下拉列表

 

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});  });