日期:2014-05-16  浏览次数:20389 次

基于extjs4的多级下拉框联动组件
原创文章,欢迎纠错,转载请注明出处
1.简介
   针对页面中常用的2级、3级联动抽象出一个联动组件,目前支持1、2、3级下拉框,并可友好的扩展为多级。
2.使用方法
可通过xtype直接使用,以下为示例和源代码


/**
 * 多级下拉框组件,目前支持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],