Extjs组合框示例

1本地数据源组合框

Ext.onReady(function(){
	//创建数据模型
	Ext.regModel('PostInfo', {
		fields: [{name: 'province'}, {name: 'post'}]
		});

		//定义组合框中显示的数据源
		var postStore = Ext.create('Ext.data.Store', {
			model: 'PostInfo',
			data: [
			{province:'北京', post: '100000'},
			{province:'通县', post: '101100'},
			{province:'昌平', post: '102200'},
			{province:'大兴', post: '102600'},
			{province:'密云', post: '101500'},
			{province:'延庆', post: '102100'},
			{province:'顺义', post: '101300'},
			{province:'怀柔', post: '101400'}
			]
	});
	//创建表单
	Ext.create('Ext.form.Panel', {
		title: 'Ext.form.field.ComboBox本地数据源示例',
			renderTo:Ext.getBody(),
			bodyPadding: 5,
			frame: true,
			height: 100,
			width: 270,
			defaults: {//统一设置表单字段默认属性
			labelSeparator: ':', //分隔符
			labelWidth: 70, //标签宽度
			width: 200, //字段宽度
			labelAlign: 'left'//标签对齐方式
		}, 
		items: [{
			xtype: 'combo', 
			listConfig: {
			emptyText: '未找到匹配值', //当值不在列表时的提示信息
			maxHeight: 60 //设置下拉列表的最大高度为60像素
		},
		name: 'post',
		fieldLabel: '邮政编码', 
		triggerAction: 'all',//单击除法按钮显示全部数据
		store: postStore, //设置数据源
		displayField: 'province',//定义要显示的字段
		valueField: 'post', //定义值字段
		queryMode: 'local', //本地模式
		forceSelection: true, //要求输入值必须在列表中存在
		typeAhead: true, //允许自动选择匹配的剩余部分文本
		value: '102600' //默认选择大兴
		}]
	});
});

2.远程数据源的组合框

Ext.onReady(function(){
			//创建数据模型
			Ext.regModel('BookInfo', {
				fields: [{name: 'bookName'}]
			});
			//定义组合框中显示的数据源
			var bookStore = Ext.create('Ext.data.Store', {
				model: 'BookInfo',
				proxy: {
					type: 'ajax', //Ext.data.AjaxProxy
					url: 'bookSearchServer.jsp',
					reader: new Ext.data.ArrayReader({model: 'BookInfo'})
				}
			});
			//创建表单
			Ext.create('Ext.form.Panel', {
			
				title: 'Ext.form.field.ComboBox远程数据源示例',
				renderTo:Ext.getBody(),
				bodyPadding: 5,
				frame: true,
				height: 100,
				width: 270,
				defaults: {//统一设置表单字段默认属性
					labelSeparator: ':', //分隔符
					labelWidth: 70, //标签宽度
					width: 200, //字段宽度
					labelAlign: 'left'//标签对齐方式
				}, 
				items: [{
					xtype: 'combo',
					fieldLabel: '书籍列表', 
					listConfig: {
						loadingText: '正在加载书籍信息', //加载数据时显示的提示信息
						emptyText: '未找到匹配值', //当值不在列表时的提示信息
						maxHeight: 60 //设置下拉列表的最大高度为60像素
					},
					allQuery: 'allbook', //查询全部信息的查询字符串
					minChars: 3, //下拉列表框自动选择当前用户需要输入的最小字符数量
					queryDelay: 300, //查询延迟时间
					queryParam: 'searchbook',//查询的名字
					triggerAction: 'all', //单击触发按钮显示全部数据
					store: bookStore, //设置数据源
					displayField: 'bookName', //定义要显示的字段
					valueField: 'bookName', //定义字段值
					queryMode: 'remote'//远程模式
				}]
			});
		});

bookSearchServer.jsp

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
	<%
		String bookName = request.getParameter("searchbook");
		String jav = "['java编程思想'],['java入门'],['javascript程序设计']";
		String cpp = "['c++编程思想'],['c++入门'],['c++程序设计']";
		String php = "['php编程思想'],['php入门'],['php程序设计']";
		String books = "";
		
		if(bookName.equals("allbook")){
			books = "[" + jav + "," + cpp + "," +  php +  "]";
			response.getWriter().write(books);
			return;
		}else{
			bookName = bookName.substring(0, 3); //取查询字符串的前3个字符串
			if(bookName.equals("jav")){
				books = "[" + jav + "]";
			}else if(bookName.equals("c++")){
				books = "[" + cpp + "]";
			}else if(bookName.equals("php")){
				books = "[" + php + "]";
			}else{
				books = "[[没有数据'']]";
			}
			response.getWriter().write(books);
		}
	 %>