Ext上拉列表 _Web前端

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