无废话ExtJs 教程十[下拉列表：Combobox]

huiqinbo

浏览: 335149 次
性别:
来自: 北京

最近访客更多访客>>

薛宝钗的猫

iamjustlyl

A741841403

qqpkat2

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

无废话ExtJs 系列教程

继上一节内容，我们在表单里加了个一个下拉列表：

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值字段
2.displayField："字符型",显示文本字段
3.editable：false//false则不可编辑，默认为 true
4.triggerAction:”all”//请设置为”all”,否则默认为”query”的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为”all”的话，每次下拉均显示全部选项
5.hiddenName:string //真正提交时此combo的name，请一定要注意。
6.typeAhead:true,//延时查询，与下面的参数配合
7.typeAheadDelay:3000,//默认250

3. 效果如下：