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