Extjs分页添加每页显示条数

PagingToolbar 设置每页条数

Ext.PagingToolbar默认没办法设置每页条数。

如 图：

如果想让用户自己定义每页条数：

如 图：

网上找了半天竟然找不到相应的解决办法，只能自 己去写个控件。

代码：

/*!
* HlJS Library 1.0.0
* Copyright(c) 2006-2010 HZZY, LLC
* [e-mail]
* http:
*/
/**
* @class Hljs.component.HlPagingToolbar
* 在Ext.PagingToolbar的基础上增加了自己设置每页多少条的功能
* 20100717 创建
*/
Ext.namespace("Hljs.component");

Hljs.component.HlPagingToolbar = Ext.extend(Ext.PagingToolbar, {
    displayInfo: true,
    displayMsg: '显示第 {0} 条到 {1} 条记录，共 {2} 条',
    emptyMsg: "无记录",
    initComponent : function(){
        var pageSizeItems = [
                     '每页',
                     this.inputItem = new Ext.form.NumberField({
    cls: 'x-tbar-page-number',
    allowDecimals: false,
    allowNegative: false,
    enableKeyEvents: true,
    maxValue: 500,
    maxText: '每页不允许超过500条',
    selectOnFocus: true,
    value: this.pageSize,
    submitValue: false,
    listeners: {
        scope: this,
        keydown: this.onHlPagingKeyDown,
        blur: this.onHlPagingBlur
    }
                     }),'条'
                     ];
         var userItems = this.items || [];
         this.items = userItems.concat(pageSizeItems);
         Hljs.component.HlPagingToolbar.superclass.initComponent.call(this);
    },
    onHlPagingKeyDown: function(field, e){
        if(field.isValid()){
            var k = e.getKey();
             if (k == e.RETURN) {
                    e.stopEvent();
                    this.pageSize = field.getValue();
                    this.doRefresh();
             }
        }
    },
    onHlPagingBlur: function(field){
        if(field.isValid()){
            this.pageSize = field.getValue();
            this.doRefresh();
        }
    }
});

评论

1 楼 ssxszt 2016-10-13  

怎么调用啊？