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