`
roc08
  • 浏览: 229507 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

});



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

相关推荐

    ExtJs学习例子:多级联动下拉菜单演示例子

    一共3个文件: ...getData.asp data.mdb 前台采用ExtJs 2.2.1编写(由于库文件比较大,考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access...本例子演示的4级联动菜单:州+国家+城市+地区

    Ext combo 下拉框级联

    级联下拉框通常用于多级分类的选择,例如国家-省份-城市这样的地理选择,或者部门-职位这样的组织结构选择。这种设计可以减少用户的输入负担,提高用户体验。 实现级联下拉框的核心在于数据的联动和更新。这通常...

    JSP页面下拉框三级联动

    2. **创建下拉框组件**:使用ExtJS框架创建三个下拉框组件,分别为省份、城市和区县。每个下拉框都关联一个数据存储对象,该对象包含了对应级别的数据。 3. **事件监听与数据加载**:为省份下拉框添加选择事件监听...

    extjs网页控件开发

    在"extjs网页控件开发"中,我们主要关注的是使用ExtJS来创建高效的网页组件,如图表和多级联动下拉列表框。这些控件能够显著提升用户界面的交互性和用户体验。 首先,让我们深入探讨ExtJS中的图表控件。ExtJS提供了...

    全球变风量(VAV)系统市场研究:年复合增长率(CAGR)为 5.8%

    在全球建筑行业不断追求节能与智能化发展的浪潮中,变风量(VAV)系统市场正展现出蓬勃的发展潜力。根据 QYResearch 报告出版商的深入调研统计,预计到 2031 年,全球变风量(VAV)系统市场销售额将飙升至 1241.3 亿元,在 2025 年至 2031 年期间,年复合增长率(CAGR)为 5.8%。这一令人瞩目的数据,不仅彰显了 VAV 系统在当今建筑领域的重要地位,更预示着其未来广阔的市场前景。​ 变风量系统的起源可追溯到 20 世纪 60 年代的美国。它犹如建筑空调系统中的 “智能管家”,能够敏锐地感知室内负荷或室内所需参数的变化,通过维持恒定的送风温度,自动、精准地调节空调系统的送风量,从而确保室内各项参数始终满足空调系统的严格要求。从系统构成来看,变风量系统主要由四个基本部分协同运作。变风量末端设备,包括 VAV 箱和室温控制器,如同系统的 “神经末梢”,负责接收室内环境变化的信号并做出初步响应;空气处理及输送设备则承担着对空气进行净化、加热、冷却等处理以及高效输送的重任;风管系统,涵盖新风、排风、送风、回风等管道,构建起了空气流通的 “高速公路”;而自动控制系统宛

    《基于YOLOv8的跆拳道训练系统》(包含源码、完整数据集、可视化界面、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    探究ChatGPT情感化交互对其用户情绪健康的多方法研究

    内容概要:本文探讨了ChatGPT这种高级语音模式的人工智能聊天机器人与用户的互动对其情绪健康的影响。研究采用了两种互补的方法:大规模平台数据分析和随机对照试验(RCT)。平台数据部分通过对超过400万次对话进行隐私保护的大规模自动化分析以及对4000多名用户的调查,揭示了高频率使用者表现出更多的情感依赖和较低的社会交往意愿。RCT部分则通过近1000名参与者为期28天的研究,发现语音模型相较于文本模型能带来更好的情绪健康效果,但长时间使用可能导致负面后果。此外,初始情绪状态较差的用户在使用更具吸引力的语音模型时,情绪有所改善。 适合人群:对人机交互、情感计算和社会心理学感兴趣的科研人员和技术开发者。 使用场景及目标:本研究旨在为AI聊天机器人的设计提供指导,确保它们不仅能满足任务需求,还能促进用户的心理健康。同时,也为政策制定者提供了关于AI伦理使用的思考。 其他说明:研究强调了长期使用AI聊天机器人可能带来的复杂心理效应,特别是对于那些已经感到孤独或社交孤立的人来说,过度依赖可能会加剧这些问题。未来的研究应该更加关注这些极端情况下的用户体验。

    Java反射性能优化:深入探讨setAccessible与MethodHandle的技术差异及应用场景

    Java 反射(Reflection)是一种强大的机制,允许程序在运行时检查和操作类的成员变量和方法。然而,传统的 `setAccessible(true)` 方式虽然便捷,但存在安全性问题,并且性能相对较低。在 Java 7 引入 `MethodHandle` 后,我们可以通过 `MethodHandles.Lookup.findVirtual()` 提供更优雅、高效的方式来访问对象属性。本文将对比这两种反射方式,并分析它们的优缺点。

    loongdomShop.tar.gz

    loongdomShop.tar.gz

    人工智能与人类行为对聊天机器人社会心理效应的纵向随机对照研究

    内容概要:本文探讨了不同交互模式(文本、中性语音、吸引人语音)和对话类型(开放式、非个人化、个人化)对聊天机器人使用者的心理社会效果(如孤独感、社交互动、情感依赖、不当使用)的影响。研究表明,在初期阶段,语音型聊天机器人比文本型更能缓解孤独感并减少情感依赖,但随着每日使用时间增加,这种优势逐渐消失,尤其是对于中性语音聊天机器人。此外,个人话题对话略微增加了孤独感,而非个人话题则导致更高的情感依赖。总体而言,高频率使用聊天机器人的用户表现出更多的孤独感、情感依赖和不当使用,同时减少了真实人际交往。研究还发现,某些个体特征(如依恋倾向、情绪回避)使用户更容易受到负面影响。 适合人群:心理学家、社会学家、人工智能研究人员以及关注心理健康和人机交互的专业人士。 使用场景及目标:①帮助理解不同类型聊天机器人对用户心理健康的潜在影响;②为设计更健康的人工智能系统提供指导;③制定政策和规范,确保聊天机器人的安全和有效使用。 其他说明:研究强调了进一步探索聊天机器人管理情感内容而不引发依赖或替代人际关系的重要性,呼吁更多跨学科的研究来评估长期影响。

    MP4575GF-Z 产品规格书

    MP4575GF-Z MP4575 TSSOP-20 降压型可调DC-DC电源芯片

    界面设计_SwiftUI_习惯养成_项目管理_1742850611.zip

    界面设计_SwiftUI_习惯养成_项目管理_1742850611.zip

    免安装版的logic软件包 支持波形实时查看 内含驱动文件

    免安装版的logic软件包。支持波形实时查看。内含驱动文件。

    基于Springboot+Mysql的学生毕业离校系统(含LW+PPT+源码+系统演示视频+安装说明).zip

    1. **系统名称**:学生毕业离校系统 2. **技术栈**:Java技术、MySQL数据库、Spring Boot框架、B/S架构、Tomcat服务器、Eclipse开发环境 3. **系统功能**: - **管理员功能**:首页、个人中心、学生管理、教师管理、离校信息管理、费用结算管理、论文审核管理、管理员管理、留言板管理、系统管理。 - **学生功能**:首页、个人中心、费用结算管理、论文审核管理、我的收藏管理。 - **教师功能**:首页、个人中心、学生管理、离校信息管理、费用结算管理、论文审核管理。

    WebSocket测试Demo程序

    配套文章:https://blog.csdn.net/gust2013/article/details/139608432

    蓝凌OA系统V15.0管理员手册

    蓝凌OA系统V15.0管理员手册

    《基于YOLOv8的生物样本识别系统》(包含源码、完整数据集、可视化界面、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    mips-gcc520-glibc222编译工具链.zip

    mips-gcc520-glibc222编译工具链.zip

    社交网络_React_Native_开发教程_学习资源_1742847416.zip

    app开发

    Swift编程语言的基础特性与应用开发入门教程

    内容概要:本文档详细介绍了Swift编程语言的基础知识,涵盖语言特点、基础语法、集合类型、控制流、函数定义、面向对象编程、可选类型、错误处理、协议与扩展以及内存管理等方面的内容。此外还简要提及了Swift与UIKit/SwiftUI的关系,并提供了进一步学习的资源推荐。通过这份文档,读者可以全面了解Swift的基本概念及其在iOS/macOS/watchOS/tvOS平台的应用开发中的使用方法。 适合人群:初学者或者希望从其他编程语言转向Swift的开发者。 使用场景及目标:帮助读者快速上手Swift编程,掌握其基本语法和特性,能够独立完成简单的程序编写任务,为进一步学习高级主题如并发编程、图形界面设计打下坚实的基础。 阅读建议:由于Swift是一门现代化的语言,拥有许多独特的特性和最佳实践方式,在学习过程中应当多加练习并尝试理解背后的原理。同时利用提供的官方文档和其他辅助材料加深印象。

Global site tag (gtag.js) - Google Analytics