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);
}
%>