原创文章,欢迎纠错,转载请注明出处
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中的组件放入其中组合成我们需要的功能组件,并通过定义数据和配置接口为其提供数据和相关配置。
分享到:
相关推荐
一共3个文件: ...getData.asp data.mdb 前台采用ExtJs 2.2.1编写(由于库文件比较大,考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access...本例子演示的4级联动菜单:州+国家+城市+地区
级联下拉框通常用于多级分类的选择,例如国家-省份-城市这样的地理选择,或者部门-职位这样的组织结构选择。这种设计可以减少用户的输入负担,提高用户体验。 实现级联下拉框的核心在于数据的联动和更新。这通常...
2. **创建下拉框组件**:使用ExtJS框架创建三个下拉框组件,分别为省份、城市和区县。每个下拉框都关联一个数据存储对象,该对象包含了对应级别的数据。 3. **事件监听与数据加载**:为省份下拉框添加选择事件监听...
在"extjs网页控件开发"中,我们主要关注的是使用ExtJS来创建高效的网页组件,如图表和多级联动下拉列表框。这些控件能够显著提升用户界面的交互性和用户体验。 首先,让我们深入探讨ExtJS中的图表控件。ExtJS提供了...
1 PartA2_SD Host_Controller_Simplified_Specification_Ver4.20 2 PartA2_SD_Host_Controller_Simplified_Specification_Ver2.00 3 PartE1_SDIO_Simplified_Specification_Ver2.00 4 PartE1_SDIO_Simplified_Specification_Ver3.00 5 Part1 PhysicalLayerSimplifiedSpecificationVer9.10Fin_20231201 6 PartE7_Wireless_LAN_Simplified_Addendum_Ver1.10 7 Part1_Extended_Security_Simplified_Addendum_Ver1.00 8 Part1_NFC_Interface_Simplified_Addendum_Ver1.00 9 Part1_UHS-II_Simplified_Addendum_Ver1.02 10 PartA1_ASSD_Extension_Simplified_Specification_Ver2.00 11 PartE2_SDIO Bluetooth_Type_A_Simplified_Specification_Ver1.00 12 SDUC-Host-Implementation-Guideline_Ver1.00
《步入元宇宙》由马克·范·里门撰写,是一本深入探讨元宇宙概念、历史、现状以及未来潜力的书籍。作者从Web 1.0到Web 3.0的发展讲起,详细分析了从增强现实(AR)到虚拟现实(VR)再到扩展现实(XR)的技术演进。书中提出了元宇宙的六大特征:互操作性、去中心化、持久性、空间性、社区驱动和自我主权,并强调了开放元宇宙的重要性及其带来的自由和创新潜力。作者还探讨了元宇宙对个人身份、商业、教育、娱乐等领域的深远影响,并预测了元宇宙将如何推动形成一个全新的社交经济。书中引用了多位行业专家的评价,强调了无论读者对元宇宙的了解程度如何,都能从中获得新的见解和启发。
卢益峰ads仿真放大器章节所需的ads库和MW6S004的ads模型
javaSE阶段面试题
《网页制作基础教程(Dreamweaver-CS6版)》第10章-网站的管理与上传.pptx
内容概要:本文详细介绍了如何使用Abaqus软件构建双线盾构隧道的超精细模型,特别是针对隧道间的联络通道、软化模量和盾构注浆等关键要素进行了深入探讨。文章首先阐述了模型的整体架构搭建,包括使用Python脚本创建隧道衬砌部件。接下来,讨论了软化模量的引入及其在材料本构模型中的定义方式,展示了如何通过塑性应变来模拟软化模量的变化。此外,文章详细讲解了盾构注浆的模拟方法,如通过单元生死技术激活注浆体单元,并提供了具体的Python代码示例。最后,文章强调了网格划分、接触设置等方面的注意事项,确保模型能够稳定运行并获得精确的结果。 适合人群:从事隧道工程数值模拟的研究人员和技术人员,尤其是熟悉Abaqus软件的工程师。 使用场景及目标:适用于需要进行双线盾构隧道工程力学行为研究的场合,旨在帮助工程师更好地理解和预测隧道施工过程中可能出现的问题,从而优化设计方案,提高施工效率和安全性。 其他说明:文中提供的代码片段和建模技巧基于作者的实际经验和测试结果,对于初学者而言,建议逐步尝试每个步骤并在实践中不断调整参数以适应具体工程项目的需求。
《自然资源信息化时代背景与发展》.pdf
《网络社会学(第2版)》15-网络社会变迁.ppt
内容概要:本文详细介绍了使用西门子1214PLC和KTP700Basic PN触摸屏构建双相机四轴多工位检测设备的具体实现方法。主要内容涵盖硬件配置、程序主体功能及其代码解析、触摸屏功能实现等方面。硬件方面,采用了西门子1214PLC作为核心控制器,KTP700Basic PN触摸屏为人机界面,双相机用于检测,第三设备通过Modbus RTU通讯。程序主体功能包括上下双工位4轴脉冲控制步进电机、与上位机双相机的TCP/IP通讯、与第三设备的Modbus RTU通讯。触摸屏功能则涉及多重画面、配方管理和密码保护等功能。文中还分享了一些调试经验和注意事项,如轴使能信号要用上升沿触发、相机通讯需配置心跳包机制等。 适合人群:从事工业自动化领域的工程师和技术人员,特别是那些对PLC编程、触摸屏应用和多工位检测设备感兴趣的读者。 使用场景及目标:适用于需要构建复杂自动化检测系统的工程项目,旨在提高检测效率和准确性,确保设备稳定可靠运行。通过学习本文,读者能够掌握如何使用西门子1214PLC和KTP700触摸屏搭建类似的检测系统。 其他说明:文中提供了大量具体的代码示例和调试技巧,有助于读者更好地理解和实施相关技术。此外,还强调了实际工程中常见的问题及解决方案,如接线和接地问题、通讯参数配置等。
- **4.4 版本** - 介绍了基础特性和标准,适合初学者了解eMMC的基本框架。 - **4.41 版本** - 对4.4版进行了修订和完善,优化了部分规范以适应市场和技术的发展。 - **4.5 版本** - 引入了新的性能改进和技术特性,进一步提升了存储效率。 - **4.51 版本** - 包含针对4.5版的小幅修正和增强,确保技术规范的准确性和实用性。 - **5.0 版本** - 重大更新,引入更多高级功能,支持更高的数据传输速率,对现代高性能需求进行了响应。 - **5.01 版本** - 在5.0基础上的维护更新,保持标准的一致性和先进性。 - **5.1 版本** - 最新的公开版本之一,提供了更全面的标准规范,加强了数据管理能力,提升了可靠性
DeepSeek系列-提示词工程和落地场景.pdf
JDK(java)安装及配置
内容概要:本文详细介绍了引力搜索算法(Gravitational Search Algorithm, GSA)的原理、MATLAB实现及其应用场景。首先解释了GSA的基本概念,即将优化问题中的候选解视为宇宙中互相吸引的粒子,通过模拟物理现象进行优化。接着展示了核心的粒子运动方程,包括加速度计算、质量分配以及引力公式的具体实现。文中提供了多个经典的测试函数如Sphere、Rastrigin等用于验证算法性能,并通过动态绘图展示了粒子群的收敛过程。此外,讨论了算法参数设置的影响,如引力常数G的指数衰减方式,以及如何通过添加随机扰动避免粒子陷入局部最优。最后强调了GSA在解决多峰优化问题方面的优势。 适合人群:对优化算法感兴趣的科研人员、学生及工程师,尤其是那些希望深入了解群体智能算法的人。 使用场景及目标:适用于需要高效寻找全局最优解的问题,特别是在面对复杂的多峰函数时。目标是帮助读者理解GSA的工作机制,掌握其MATLAB实现方法,并能够根据实际情况调整参数以获得更好的优化效果。 其他说明:尽管GSA在低维问题上有出色表现,但在高维优化问题中可能存在效率瓶颈,因此建议进一步研究并行计算或近似邻居搜索等改进措施。
基于Andorid的跨屏拖动应用设计实现源码,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者,也可作为课程设计、期末大作业。
DeepSeek R1 7b本地部署模型整合包及超全学习教程,资源总大小420G,喜欢的自行下载。
精品推荐,最新人工智能训练师认证资料汇总,15份。供大家学习参考。 (新版)人工智能训练师(中级)职业技能等级认定考试题库.pdf 2025年人工智能训练师(高级)职业技能鉴定参考题库(含答案).pdf 阿里认证高级人工智能训练师真题.pdf 初级人工智能训练师题库.pdf 高级人工智能化训练师认证答案解析.doc 高级人工智能训练师.docx 高级人工智能训练师题库.pdf 人工智能技术应用基础课件:人工智能训练师.pdf 人工智能训练师(服务机器人人工智能技术应用)(学生组)理论题库.pdf 人工智能训练师(服务机器人人工智能技术应用)理论题库.docx 人工智能训练师概述课件.pdf 人工智能训练师基础(上册).pdf 人工智能训练师技能等级认定四级理论知识试卷.docx 人工智能训练师试题及答案(150题).pdf 人工智能训练师职业技能标准.pdf