继上一节内容，我们在表单里加了个一个下拉列表：
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. 效果如下：
![无废话ExtJs 教程十[下拉列表：Combobox]_第1张图片](http://img.e-com-net.com/image/product/a99137edc8a34350825bf5654cfcecef.jpg)
4. 项目代码：参照附件内的 [extjs.zip]
注：这是练习期间的个人写的代码，非extjs源码包