基于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],
store : {
fields: [comboCfg.fields[0], comboCfg.fields[1]],
data : comboCfg.data
},
queryMode: 'local'
});
return parentItem;
},


/**
 * 创建子下拉项
 */
createChildItem : function(comboCfg,parentCombo,parentCode){
var me = this,childItem;
childItem = Ext.create('Ext.form.ComboBox', {
name : comboCfg.name,
editable : comboCfg.editable==true?true:false,
readOnly :me.readOnly == true?true:false,
value : comboCfg.value,
parentCombo : parentCombo,
parentCode : parentCode,
comboCfg : comboCfg,
allowBlank : false,
mode : 'local',
displayField : comboCfg.fields[0],
valueField : comboCfg.fields[1],
store:{
fields: [comboCfg.fields[0], comboCfg.fields[1]],
data : !comboCfg.data ? comboCfg : [],
},
listeners : {
'expand' : function(combo){
if(combo.store.data.length == 0){
var value1 = combo.parentCombo.getValue();
if(!value1){
Ext.Msg.alert("提醒",combo.comboCfg.parentEmptyMsg);
return false;
}
if(combo.parentCode == value1.trim()){
return false;
}
combo.parentCode = value1.trim();
var reqConfig = {
url : combo.comboCfg.dataUrl + combo.parentCode,
success : function(response,options) {
combo.getStore().loadData(Ext.decode(response.responseText));
}
};
Ext.Ajax.request(reqConfig);
}
}
}
});
return childItem;
}

});

/**
 * 多级下拉框组件，目前支持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],
    	    store : {
    	         fields: [comboCfg.fields[0], comboCfg.fields[1]],
    	         data : comboCfg.data
    	    },
    	    queryMode: 'local'
    	});
      return parentItem; 
   },
   
  
  /**
	 * 创建子下拉项
	 */
  createChildItem : function(comboCfg,parentCombo,parentCode){
        var me = this,childItem;
        childItem = Ext.create('Ext.form.ComboBox', {
       	    name : comboCfg.name,
     	    editable : comboCfg.editable==true?true:false,
     	    readOnly :me.readOnly == true?true:false,
     	    value : comboCfg.value,
     	    parentCombo : parentCombo,
     	    parentCode : parentCode,
     	    comboCfg : comboCfg,
     	    allowBlank : false,
     	    mode : 'local',
     	    displayField : comboCfg.fields[0],
     	    valueField : comboCfg.fields[1],
     	    store:{
 	         fields: [comboCfg.fields[0], comboCfg.fields[1]],
 	         data : !comboCfg.data ? comboCfg : [],
     	    },
     	    listeners : {
     	    	'expand' : function(combo){
     	    		if(combo.store.data.length == 0){
     	    			var value1 = combo.parentCombo.getValue();
         	    		if(!value1){
         	    			Ext.Msg.alert("提醒",combo.comboCfg.parentEmptyMsg);
         	    			return false;
         	    		}
         	    		if(combo.parentCode == value1.trim()){
         	    			return false;
         	    		}
         	    		combo.parentCode = value1.trim();
                      var reqConfig = {
                          url : combo.comboCfg.dataUrl + combo.parentCode,
                          success : function(response,options) {
                              combo.getStore().loadData(Ext.decode(response.responseText));
                          }
                      };
                      Ext.Ajax.request(reqConfig);
     	    		}
     	    	}
     	    }
     	});
       return childItem; 
}

});

3.扩展思路
通过这个组件为我们将系统中通用的小功能组件化提出了一种思路，通过继承FieldContainer将几个Extjs中的组件放入其中组合成我们需要的功能组件，并通过定义数据和配置接口为其提供数据和相关配置。