Extjs 4.2使用心得 --- combobox組合框和paging 分頁工具提示

標籤：style   blog   http   color   使用   os   io   檔案   

　　這兩個功能經常會一併使用到，一般在產生combo組合框時，設定pageSize大於0，在下拉式清單的頁尾位置會自動建立一個分頁工具列，前提是queryMode：‘remote‘ 讀取遠端資料時。

　　先來建立一個Model:

Ext.define(‘Post‘, {        extend: "Ext.data.Model",        proxy: {            type: ‘ajax‘,            url: ‘/admin/organizations/ExtCombox/‘,            reader: {                type: ‘json‘,                root: ‘orgs‘,                totalProperty: ‘total‘            }        },        fields: [            {name: ‘id‘, mapping: ‘id‘},            {name: ‘name‘, mapping: ‘name‘}        ]    });

　　然後是store和combox

    var ds = Ext.create(‘Ext.data.Store‘, {        pageSize: 10,  //limit參數，每頁顯示條數，預設為25        autoLoad:false,        model: ‘Post‘    });    var combox = Ext.create(‘Ext.panel.Panel‘, {        width: 320,        bodyPadding: 1,        layout: ‘anchor‘,        items: [            {                xtype: ‘combo‘,                store: ds,                displayField: ‘name‘,                minChars: 4,  //最小字元數                typeAhead: false,                hideLabel: true,                hideTrigger: true,                anchor: ‘100%‘,                multiSelect: false,                queryDelay: 1000,                queryMode: ‘remote‘,  //讀取遠端資料 讀本機資料為 local                queryParam: ‘sSearch‘,  //查詢參數，預設為 query                listConfig: {                    loadingText: ‘尋找中.‘,                    emptyText: ‘沒有符合的資料‘                    // minHeight,maxHeight,minWidth,maxWidth:100 下拉框最小，最大高度和寬度設定                },                pageSize: 10  //下拉式清單方塊的分頁大小,大於0則自動建立分頁欄            },            {                xtype: ‘component‘,                style: ‘margin-top:10px‘,                html: ‘最少輸入4位字元‘            }        ]    });

然後有容器就在容器裡引用，沒容器就renderTo: Ext.getBody()，效果：,

輸入查詢參數的得到結果

查看瀏覽器控制台可以看到發送的參數：

_dc=1406791364718      緩衝序號，自動產生，不用管
limit=10　　　　　　　　　每頁顯示條數
page=1　　　　　　　　　 當前頁數
sSearch=北京　　　　　　查詢參數
start=0　　　　　　　　　本次查詢起始序號

還有返回的結果：

{"orgs": [{"id": 9110, "name": "\u5317\u4eac\u5510\u62c9\u96c5\u79c0\u9152\u5e97\u66a8\u5317\u4eac\u71d5\u4eac\u996d\u5e97\u6709\u9650\u8d23\u4efb\u516c\u53f8"}, {"id": 669, "name": "\u5317\u4eac\u79d1\u822a\u6295\u8d44\u6709\u9650\u516c\u53f8"}, {"id": 11464, "name": "\u6d77\u822a\u4e91\u7aef\u4f20\u5a92\uff08\u5317\u4eac\uff09\u6709\u9650\u516c\u53f8"}, {"id": 15, "name": "\u5317\u4eac\u884c\u653f\u4e2d\u5fc3"}, {"id": 567, "name": "\u5317\u4eac\u822a\u7ad9\u63a7\u5236\u4e2d\u5fc3"}, {"id": 405, "name": "\u5317\u4eac\u5b89\u5168\u529e\u516c\u5ba4"}, {"id": 358, "name": "\u5317\u4eac\u8425\u4e1a\u90e8"}, {"id": 6509, "name": "\u5317\u4eac\u65b0\u534e\u7a7a\u6e2f\u822a\u7a7a\u98df\u54c1\u6709\u9650\u516c\u53f8"}, {"id": 587, "name": "\u5317\u4eac\u8425\u8fd0\u57fa\u5730"}, {"id": 8912, "name": "\u5317\u4eac\u9996\u90fd\u822a\u7a7a\u6709\u9650\u516c\u53f8"}], "total": 141}

　　返回的中文被轉碼了，╮(╯▽╰)╭，反正只需要看檔案結構就行了，有根節點‘orgs‘和資料總數‘total‘，這裡的兩個參數名稱需要和Model.proxy.reader裡設定的‘root‘和‘totalProperty‘一樣，若root不一樣則解讀不了資料，若totalProperty不一樣則分頁顯示會錯誤。

　　就是這樣了，總之在使用Extjs時，參數的設定非常重要，只要參數設定正確，Extjs將會完成後面的工作，參數有誤就慢慢調到合適的格式吧。