1. 程式人生 > 其它 >Extjs4.2+webAPI+EF實現分頁以及webapi的資料傳值(續)

Extjs4.2+webAPI+EF實現分頁以及webapi的資料傳值(續)

現在領導又要增加功能,需要分頁的時候,每頁顯示N條資訊。由於是每個頁面都要改,所有需要聲明瞭一個擴充套件類程式碼如下:

// Copyright : 歐藍德暢電子技術有限公司.  All rights reserved.
// 檔名:pager.js
// 檔案描述:分頁擴充套件類,extJS控制元件之每頁顯示N條記錄 
//-----------------------------------------------------------------------------------
// 建立者:
// 建立時間:2013-06-21
//====================================================================================

Ext.define('Ext.ux.ComboPageSize', {
    requires: [
        'Ext.form.field.ComboBox'
    ],
    pageSizes: [5, 10,15,20, 25, 50, 100, 200, 500, 1000],
    constructor: function (config) {
        if (config) {
            Ext.apply(this, config);
        }
    },
    init: function (pbar) {
        var combo = Ext.widget('combo', {
            store: this.pageSizes
            , fieldLabel: '每頁顯示'
            , labelWidth: 60
            , width: 120
            , listeners: {
                change: function (s, v) {
                    pbar.store.pageSize = v;
                    pbar.store.loadPage(1);
                }
            }
        });
        var itemlengths = pbar.items.items;
        pbar.add(itemlengths, '-', combo, '行');
        combo.setValue(pbar.store.pageSize);
    }
});

使用方法是:

bbar: Ext.create('Ext.PagingToolbar', {
                    plugins: [new Ext.ux.ComboPageSize({})],
                    store: Batchstore, //---grid panel的資料來源
                    displayInfo: true,
                    displayMsg: '顯示 {0} - {1} 條,共計 {2} 條',
                    emptyMsg: "沒有資料"
                }),

實現的效果圖為: