日期:2014-05-16 浏览次数:20389 次
/** * 多级下拉框组件,目前支持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],