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