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