ExtJs4.2分頁動態展示每頁顯示條數

引言

此博文主要用於技術學習交流所用，如有不當之處，請多多指教！
此篇博文主要是學習寫Extjs插件，原本的extjs分頁插件中是沒有這樣的功能的，所以需要我們根據自己的需求，自定義自己的分頁插件！
此插件的功能是在extjs原有的分頁插件上擴增的用於動態顯示每頁顯示條數的：
原本插件如下圖所示：


更改後可以動態顯示每頁展示條數，如下圖所示：


出現的問題：
這個是我想知道的，爲什麼我的小鍵盤不能輸入數字！

具體代碼如下

Ext.define('***.CustomSizePagingToolbar', {// 定義的名字要和文件的名字大小寫一樣
    extend : 'Ext.toolbar.Paging',
    xtype:'customSizePagingToolbar',
    alias : 'widget.custompaging',// 別名
    beforSizeText : '每頁',
    afterSizeText : '條',
    defPageSize : null,
    getCustomItems : function() {
        debugger
        var me = this;
        // 自定義customComStore
        var customComStore = Ext.create('Ext.data.JsonStore', {
            fields : [ 'customPageSize' ],
            data : [ {
                customPageSize : '5'
            }, {
                customPageSize : '25'
            }, {
                customPageSize : '50'
            }, {
                customPageSize : '100'
            } ]
        });
        // 自定義customComboBox
        var customComboBox = Ext.create('Ext.form.field.ComboBox', {
            itemId : 'customComboId',
            store : customComStore,
            queryMode : 'local',
            displayField : 'customPageSize',
            valueField : 'customPageSize',
            enableKeyEvents : true,// 感應鍵盤事件
            width : 60,
            editable : true,//可編輯combox
            listeners : {
                scope : me,// 作用域
                select : me.onCustomSelect,
                keyup : me.onCustomKeyDown,
                blur : me.onCustomBlur
            }
        });
        // - 表示分割線,> 表示右邊顯示
        return [ '-', me.beforSizeText, customComboBox, me.afterSizeText ];
    },
    onCustomSelect : function(combo, records, eOpts) {// 選擇事件觸發
        var me = this;
        me.store.pageSize = records[0].data.customPageSize;
        me.store.loadPage(1);// 默認加載第一頁
    },
    onCustomKeyDown : function(field, e, eOpts) {// 按鍵事件觸發
        var me = this;
        var keyCode = e.getKey();
        var value = me.child('#customComboId').getValue();
        //判斷輸入的是否是數字，如果不是數字，就賦值爲默認值，過濾掉某些沒有操作意義的鍵
        if ((keyCode >= 48 && keyCode <= 57)||keyCode==8||keyCode==17||keyCode==18||keyCode==20
            ||keyCode==27||keyCode==37||keyCode==38||keyCode==39||keyCode==40||keyCode==16||keyCode==46
            ||keyCode==91||keyCode==36||keyCode==33||keyCode==34||keyCode==35) {
            if(value!=0){
                me.store.pageSize = value;
            }
            me.child('#customComboId').setValue(me.store.pageSize);
           // me.store.loadPage(1);
        }else if(keyCode==13&&!Ext.isEmpty(value)){
        //如果是回車，可以直接按當前輸入的條數直接加載
            me.store.loadPage(1);// 默認加載第一頁
        }else {
           e.stopEvent();// 停止其他事件
            me.child('#customComboId').setValue(me.defPageSize);//默認初始值
       }
    },
    onCustomBlur : function(combo, the, eOpts) {// 失去焦點事件
        var me = this;
        var value = combo.rawValue;
        //如果存在正整數的值，直接賦值默認值
        var reg = /^[0-9]*[1-9][0-9]*$/;
        if (!Ext.isEmpty(value)) {
            if(reg.test(value)) {
                //存在非正整數的值時，默認爲默認值
                me.store.pageSize=value;
            }else{
                //如果是正整數才直接賦值，否則也是給默認值
                me.store.pageSize=me.defPageSize;
            }
        }else {
            //爲空時
            me.store.pageSize=me.defPageSize;
        }
        me.child('#customComboId').setValue(me.store.pageSize);
        me.store.loadPage(1);// 默認加載第一頁
    },
    // 初始化界面組件
    initComponent : function() {
        var me = this;
        Ext.apply(me, {// 應用、附加
            items : me.getCustomItems()
        });
        me.callParent(arguments);
        me.child('#customComboId').setValue(me.store.pageSize);// 初始化賦值
        me.defPageSize=me.store.pageSize;//記錄初始值
    }
});

引用方式（grid）

在grid中的具體引用：

bbar: {
    xtype:'customSizePagingToolbar',
        store: Datas,//自己store的路徑或名稱
        displayInfo: true
}

Store中的寫法

寫法與之前一樣的寫法，pageSize還是默認每頁顯示條數

Ext.define('***.Datas', {//自己store的路徑
	extend: 'Ext.data.Store',
	model: '****.Data',//自己model的路徑
	storeId: 'Datas',
	autoLoad: true,
	pageSize: 15,
	proxy: {
		type: 'service',
		action: '**/**',//請求路徑的action
		method: '****',//請求路徑的method
		reader: {
			root: 'dataRows',
			totalProperty: 'totalRecord'
		}
	}
});

注：需要在Extjs的controller中引入我們的插件纔可以哦，不然會報些奇奇怪怪的錯，而且頁面也不會出來！

其他

本插件是基於前人的開發的插件之上開發的，具體博客：
https://blog.csdn.net/wh13267207590/article/details/78583215