继上一节内容，我们在表单里加了个一个下拉列表：
1. index.jsp代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<!--ExtJs框架开始-->
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<!--ExtJs框架结束-->
<!--
<script type="text/javascript" src="study/helloWorld.js"></script>
<script type="text/javascript" src='study/window.js'></script>
<script type="text/javascript" src='study/formPanel.js'></script>
<script type="text/javascript" src='study/textField.js'></script>
<script type="text/javascript" src='study/button.js'></script>
<script type="text/javascript" src='study/login.js'></script>
-->
<!--调用/study/radioGroup_checkBoxGroup.js 实现登陆页面内的日期/数字/单选按钮/复选框/下拉列表的调用 -->
<script type="text/javascript" src="Ext/src/locale/ext-lang-zh_CN.js"></script><!--中文日期翻译-js-->
<script type="text/javascript" src='study/comboBox.js'></script>
<style type="text/css">
.loginicon
{
background-image: url(study/login.gif) !important;
}
</style>
<style type='text/css'>
.x-form-unit
{
height:22px;
line-height:22px;
padding-left:2px;
display:inline-block;
display:inline;
}
</style>
</head>
<body>
<br>
</body>
</html>
2. comboBox.js 代码如下
Ext.onReady(function(){
//--------------------------------------下拉列表开始-----------------------------//
//创建数据源[数组数据源]
var arrayStore = new Ext.data.ArrayStore({
fields:['id','name'], //数据源包含两列,列名分别为'id','name'
data:[[1,'member'],[2,'party member'],[3,'christian']] //数据源对应的数据, 例id:1, name:member
});
//创建一个新的下拉列表
var comboBox = new Ext.form.ComboBox({
fieldLabel:'Faith',
store:arrayStore, //参照上面的定义的数据源，这个属性是必需要
displayField:'name', //对应数据源的显示列，这个属性是必需要
valueField:'id', //对应数据源的列值，这个属性是必需要
mode:'local', //指定数据源为本地数据源，如果数据源来自服务器,设置为'remote'
triggerAction:'all', //1.请设置为'all',这样每次下拉都显示全部; 否则默认为'query'情况下,当选择某个值后，
emptyText:'Please to select..', //2.再点击下拉时，只会出现刚刚选出的项,请看效果图2
editable:false //默认comboBox 的内容是可编辑的,我们要求不能直接输入值,所以设置为false
})
//ComboBox获取值
comboBox.on('select',function(){ //点击下拉列表,选择后会alert出下拉列表的选择值
alert(comboBox.getValue());
});
//--------------------------------------下拉列表开始-----------------------------//
new Ext.Window({
width:367,
height:247,
iconCls:'loginicon',
items:[
new Ext.form.FormPanel({
frame:true,
style:'margin: 10px',
bodyStyle:'padding:10px 0px 10px 15px', //循序分别为上右下左
labelWidth:50,
items:[
//Name
new Ext.form.TextField({
fieldLabel:'Name'
}),
//Password
new Ext.form.TextField({
fieldLabel:'Pwd',
inputType:'password'
}),
//Date
new Ext.form.DateField({
fieldLabel:'Date',
format:'Y-m-d'
}),
//Sex
new Ext.form.RadioGroup({
fieldLabel:'Sex',
width:140,
items:[
new Ext.form.Radio({
boxLabel:'man',
inputType:'radio', //The type attribute for input field, e.g:radio/text/password
inputValue:'0',
checked:true
}),
new Ext.form.Radio({
boxLabel:'woman',
inputValue:'1'
})
]
}),
//Evaluate
new Ext.form.CheckboxGroup({
fieldLabel:'Evaluate',
width:140,
items:[
new Ext.form.Checkbox({
boxLabel:'Beliving',
inputValue:'0',
checked:true
}),
new Ext.form.Checkbox({
boxLabel:'Faithless',
inputValue:'1'
})
]
}),
//Faith
comboBox
]
})
]
}).show();
});
注 1说明：
|
combo这个组件是需要绑定一个数据源才能使用,所以store和displayField和valueField是必须的 |
注 2常用属性：
|
1.valueField:"字符型"，value值字段 |
3. 效果如下：
4. 项目代码：参照附件内的 [extjs.zip]
注：这是练习期间的个人写的代码，非extjs源码包
相关推荐
参考提供的博客文章"无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]"，作者李林峰详细解释了如何配置和使用这类控件。文章中可能涵盖了创建两个联动的下拉列表树控件的实例，通过选择一个列表中的项目来动态...
win7修复本地系统工具
《自动化专业英语》04-Automatic-Detection-Block(自动检测模块).ppt
《计算机专业英语》chapter12-Intelligent-Transportation.ppt
内容概要：本文详细介绍了基于西门子S7-1200博图平台的3轴伺服螺丝机程序。该程序使用SCL语言编写，结合KTP700组态和TIA V14及以上版本，实现了对X、Y、Z三个轴的精密控制。文章首先概述了程序的整体架构，强调了其在自动化控制领域的高参考价值。接着深入探讨了关键代码片段，如轴初始化、运动控制以及主程序的设计思路。此外，还展示了如何通过KTP700组态实现人机交互，并分享了一些实用的操作技巧和技术细节，如状态机设计、HMI交互、异常处理等。 适用人群：从事自动化控制系统开发的技术人员，尤其是对西门子PLC编程感兴趣的工程师。 使用场景及目标：适用于希望深入了解西门子S7-1200博图平台及其SCL语言编程特点的学习者；旨在帮助读者掌握3轴伺服系统的具体实现方法，提高实际项目中的编程能力。 其他说明：文中提供的代码示例和设计理念不仅有助于理解和学习，还能直接应用于类似的实际工程项目中。
内容概要：本文详细探讨了五种非线性滤波器（卡尔曼滤波(KF)、扩展卡尔曼滤波(EKF)、无迹卡尔曼滤波(UKF)、粒子滤波(PF)和变维卡尔曼滤波(VDKF)）在水下长基线定位（LBL）系统中的应用。通过对每种滤波器的具体实现进行MATLAB代码展示，分析了它们在不同条件下的优缺点。例如，KF适用于线性系统但在非线性环境中失效；EKF通过雅可比矩阵线性化处理非线性问题，但在剧烈机动时表现不佳；UKF利用sigma点处理非线性，精度较高但计算量大；PF采用蒙特卡罗方法，鲁棒性强但计算耗时；VDKF能够动态调整状态维度，适合信标数量变化的场景。 适合人群：从事水下机器人(AUV)导航研究的技术人员、研究生以及对非线性滤波感兴趣的科研工作者。 使用场景及目标：①理解各种非线性滤波器的工作原理及其在水下定位中的具体应用；②评估不同滤波器在特定条件下的性能，以便为实际项目选择合适的滤波器；③掌握MATLAB实现非线性滤波器的方法和技术。 其他说明：文中提供了详细的MATLAB代码片段，帮助读者更好地理解和实现这些滤波器。此外，还讨论了数值稳定性问题和一些实用技巧，如Cholesky分解失败的处理方法。
VMware-workstation-full-14.1.3-9474260
DeepSeek系列-提示词工程和落地场景.pdf
javaSE阶段面试题
《综合布线施工技术》第5章-综合布线工程测试.ppt
安川机器人NX100使用说明书.pdf
内容概要：本文详细介绍了将M7120型平面磨床的传统继电器控制系统升级为基于西门子S7-1200 PLC的自动化控制系统的过程。主要内容涵盖IO分配、梯形图设计和组态画面实现。通过合理的IO分配，确保了系统的可靠性和可维护性；梯形图设计实现了主控制逻辑、砂轮升降控制和报警逻辑等功能；组态画面则提供了友好的人机交互界面，便于操作和监控。此次改造显著提高了设备的自动化水平、运行效率和可靠性，降低了维护成本。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是熟悉PLC编程和控制系统设计的专业人士。 使用场景及目标：适用于需要进行老旧设备升级改造的企业，旨在提高生产设备的自动化水平和可靠性，降低故障率和维护成本。具体应用场景包括但不限于金属加工行业中的平面磨床等设备的控制系统改造。 其他说明：文中还分享了一些实际调试中的经验和技巧，如急停逻辑的设计、信号抖动的处理方法等，有助于读者在类似项目中借鉴和应用。
chromedriver-linux64-136.0.7103.48.zip
IMG_20250421_180507.jpg
《网络营销策划实务》项目一-网络营销策划认知.ppt
Lianantech_Security-Vulnerabil_1744433229
MybatisCodeHelperNew2019.1-2023.1-3.4.1
【深度学习部署】基于Docker的BERT模型训练与API服务部署：实现代码复用与模型共享
摘 要 传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此，在计算机上安装火车票订票系统软件来发挥其高效地信息处理的作用，可以规范信息管理流程，让管理工作可以系统化和程序化，同时，火车票订票系统的有效运用可以帮助管理人员准确快速地处理信息。 火车票订票系统在对开发工具的选择上也很慎重，为了便于开发实现，选择的开发工具为Eclipse，选择的数据库工具为Mysql。以此搭建开发环境实现火车票订票系统的功能。其中管理员管理用户，新闻公告。 火车票订票系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，火车票订票系统都可以轻松应对。 关键词：火车票订票系统；SpringBoot框架，系统分析，数据库设计