組合框Ext.form.field.ComboBox

<div id="localComboBox" class="w_320">
    <h2>本地數據源的組合框</h2>
</div>
<div id="remoteComboBox" class="w_320">
    <h2>遠程數據源的組合框</h2>
</div>

Ext.onReady(function(){
    //Ext表單
    
    //Ext.form.Basic 基本表單組件二(拾取器字段Picker)
    //開發中使用表單面板組件Ext.form.Panel,它本質是一個標準的(面板)Ext.panel.Panel,它內置並自動建立了Ext.form.Basic基本表單組件
    //與原始表單主要3點不一樣(1.提交方式 2.表單驗證 3.表單組件)
    //1.提交方式(同步---異步)
    //2.表單驗證(須要手動驗證----配置便可使用)
    //3.表單組件(基本的組件------擴展的功能強大的組件)
    
    //Picker抽象類,具備惟一的觸發按鈕用於在字段下方動態彈出面板
    //拾取器組件如：(1.ComboBox,2.Date,3.Time)
    
    //初始化信息提示功能
    Ext.QuickTips.init();
    
    //1、組合框Ext.form.field.ComboBox
    //1.本地數據源的組合框
    //1.1 定義數據模型
    Ext.define('postInfo',{
        extend: 'Ext.data.Model',
        fields : [{name : 'province'},{name : 'post'}]
    })
    //1.2 定義組合框中顯示的數據源
    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'}
        ]
    });
    //1.3 建立表單
    Ext.create('Ext.form.Panel',{
        title : '本地數據源的組合框',
        width : 270,
        height : 100,
        frame : true,
        renderTo : 'localComboBox',
        bodyStyle : '5px',
        defautls : {
            width : 200,
            labelWidth : 70,
            labelSeparator : ': ',
            labelAlign : 'left'
        },
        items : [{
            id : 'postId',
            name : 'post',
            fieldLabel : '郵政編碼',
            xtype :　'combo',
            listConfig : {
                emptyText : '未找到匹配值',
                maxHeight : 110
            },
            triggerAction : 'all',//點擊觸發按鈕顯示所有數據
            store : postStore,
            displayField : 'province',//定義要顯示的字段
            valueField : 'post',//定義值字段
            queryMode : 'local',//本地模式
            forceSelection : true,//要求輸入值必須在列表中存在
            typeAhead : true,//容許自動選擇匹配的剩餘部分文本
            value : '102600' //默認選擇大興
        }]
    });
    
    //2.遠程數據源的組合框
    //2.1 定義數據模型
    Ext.define('bookInfo',{
        extend: 'Ext.data.Model',
        fields : [{name : 'bookName'}]
    });
    //2.2 定義組合框中顯示的數據源
    var bookStore = Ext.create('Ext.data.Store',{
        model : 'bookInfo',
        proxy : {
            type : 'ajax',//Ext.data.AjaxProxy
            url :'../index.jsp',
            reader : new Ext.data.ArrayReader({model : 'bookInfo'})
        }
    });
    
    //2.3 建立表單
    Ext.create('Ext.form.Panel',{
        title : '遠程數據源的組合框',
        width : 270,
        height : 100,
        renderTo : 'remoteComboBox',
        frame : true,
        bodyStyle :'padding:5px',
        defaults : {
            width : 200,
            labelWidth : 70,
            labelSeparator : ': ',
            labelAlign : 'left'
        },
        items : [{
            id : 'remoteComboBoxId',
            name : 'remoteComboBoxName',
            fieldLabel : '書籍列表',
            xtype : 'combo',
            listConfig : {
                loadingText : '正在加載書籍信息.....',
                emptyText : '未找到匹配值',
                maxHeight : 110
            },
            allQuery : 'allbook',//查詢所有信息的查詢字符串
            minChars :　3, //下拉列表框自動選擇前用戶輸入的最小字符數量
            queryDelay : 300,//查詢延遲時間
            queryParam : 'searchbook',//查詢的名字
            triggerAction : 'all',//單擊觸發按鈕顯示所有數據,
            store : bookStore,//設置數據源
            displayField : 'bookName',
            valueField : 'bookName',
            queryMode : 'remote'//遠程模式
            
        }]
        
    });
    
});

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%--
    服務器放回的格式爲: [['a'],['b'],['c']]
--%>
<%
    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);
    }
%>