日期:2014-05-16 浏览次数:20475 次
/**
* 多级下拉框组件,目前支持1、2、3级
* e.g:
{
fieldLabel: "管理地区<font color='red'>*</font>", //设置label
margin: '5px 0px 5px 20px', //边距
xtype:'multiCombo', //类型
colspan:2,
readOnly:false,//true即下拉框全部为只读
width:1000,
config:{ //此处为多级combo的配置
comboNumber:3, //combo数,如果为3则需指定combo1、combo2、combo3的配置情况
combo1:{//第一下拉框配置,此处配置项同extjs combo组件
name:'provinceCombo',
fields:["provinceName","provinceCode"],
data : [
#foreach($item in $provinceList)
#if("$velocityCount"!="1"),#end
{"provinceName":"$!item.locationName", "provinceCode":"$!item.locationCode"}
#end
]
},combo2:{//第二下拉框配置,此处配置项:name、fields同extjs combo组件
name:'cityCombo',
fields:["cityName","cityCode"],
//dataUrl为第二下拉框的数据请求地址,在点击下拉框时触发请求,根据第一下拉框的值请求对应的值填充到下拉框。
//此处即根据省份的编码取市级信息填充
dataUrl:'base-info!getCitysOfProvince.do?provinceCode=',
parentEmptyMsg:'请选择省份信息'//若没有选择第一下拉框的值就点击此下拉框将弹出此提示
},combo3:{//第三下拉框配置
name:'regLocationId',
editable:false,//是否可编辑,同extjs中的combo
fields:["districtName","regLocationId"],
dataUrl:'base-info!getDistrictsOfCity.do?cityCode=',
parentEmptyMsg:'请选择市级信息'
}
}
}
* @author sunpf
* @date 2013-1-20
*/
Ext.define('Glodon.gbmp.component.comp.combo.MultiCombo', {
extend : 'Ext.form.FieldContainer',
alias : 'widget.multiCombo',
layout : 'hbox',
width : '100%',
config : null,
parentItem : null,//第一下拉框
childItem1 : null,//第二下拉框
childItem2 : null,//第三下拉框
parentItemCode : null,//第一下拉框值的编码,用于防止多次请求相同的数据
childItem1Code : null,//第二下拉框值的编码,用于防止多次请求相同的数据
initComponent : function() {
var me = this, mItems;
mItems = me.createSelectItems();
me.items = mItems;
me.callParent();
},
/**
* 创建并初始化下拉选择框
* @returns {Array}
*/
createSelectItems : function(){
var me = this;
var selectItems = [];
//1.生成第一下拉框
me.parentItem = me.createParentItem(me.config.combo1);
selectItems.push(me.parentItem);
if(me.config.comboNumber && me.config.comboNumber > 1 ){
//2.生成第二下拉框
me.childItem1 = me.createChildItem(me.config.combo2,me.parentItem,me.parentItemCode);
selectItems.push(me.childItem1);
if(me.config.comboNumber > 2){
//3.生成第三下拉框
me.childItem2 = me.createChildItem(me.config.combo3,me.childItem1,me.childItem1Code);
selectItems.push(me.childItem2);
//绑定事件,清空第三下拉框的值
me.childItem1.on('select',function(){
me.childItem2.clearValue();
me.childItem2.getStore().removeAll();
});
}
//绑定事件,清空第二、三下拉框的值
me.parentItem.on('select',function(){
me.childItem1.clearValue();
me.childItem1.getStore().removeAll();
if(me.childItem2){
me.childItem2.clearValue();
me.childItem2.getStore().removeAll();
}
});
}
return selectItems;
},
/**
* 创建第一级下拉项
*/
createParentItem : function(comboCfg){
var me = this,parentItem;
parentItem = Ext.create('Ext.form.ComboBox', {
name : comboCfg.name,
fieldLabel : '',
hideLabel : true,
editable : comboCfg.editable==true?true:false,
readOnly :me.readOnly == true?true:false,
allowBlank : false,
value:comboCfg.value,
displayField : comboCfg.fields[0],
valueField : comboCfg.fields[1],