ExtJs自定义分页组件

刚接触ExtJs的时候，由于用C#做Web项目，分页方法一般是传入当前页PageIndex和每页显示记录数PageSize获取数据，所以修改了ExtJs本身的PagingToolbar用于适应这种情况。贴出代码如下:

  1/**//**
  2* @author Terry
  3*/
  4
  5Ext.ux.PagingToolbar = Ext.extend(Ext.PagingToolbar, {
  6    afterPageText: '/ {0}',
  7    beforePageText: '页',
  8    displayInfo: true,
  9    displayMsg: '当前显示 {0} - {1}条记录 /共 {2}条记录',
 10    emptyMsg: '无显示数据',
 11    firstText: '第一页',
 12    prevText: '前一页',
 13    nextText: '后一页',
 14    lastText: '最后一页',
 15    refreshText: '刷新',
 16    pageSize: 50,
 17    paramNames: {
 18        start: 'pageIndex',
 19        limit: 'pageSize'
 20    },
 21
 22    updateInfo: function() {
 23        if (this.displayEl) {
 24            var count = this.store.getCount();
 25
 26            var msg = count == 0 ? this.emptyMsg : String.format(this.displayMsg, this.cursor, this.cursor + count - 1, this.store.getTotalCount());
 27
 28            this.displayEl.update(msg);
 29        }
 30    },
 31
 32    onLoad: function(store, r, o) {
 33        if (!this.rendered) {
 34            this.dsLoaded = [store, r, o];
 35
 36            return;
 37        }
 38
 39        if (!o.params || this.store.getTotalCount() == 0) {
 40            this.cursor = 0;
 41        }
 42        else {
 43            this.cursor = (o.params[this.paramNames.start] - 1) * this.pageSize + 1;
 44        }
 45
 46        var d = this.getPageData(), ap = d.activePage, ps = d.pages;
 47
 48        this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
 49        this.field.dom.value = ap;
 50
 51        this.first.setDisabled(ap == 1 || ps == 0);
 52        this.prev.setDisabled(ap == 1 || ps == 0);
 53        this.next.setDisabled(ap == ps || ps == 0);
 54        this.last.setDisabled(ap == ps || ps == 0);
 55        this.loading.enable();
 56        this.loading.setDisabled(ps == 0);
 57        this.updateInfo();
 58    },
 59
 60    getPageData: function() {
 61        var total = this.store.getTotalCount();
 62
 63        return {
 64            total: total,
 65            activePage: total != 0 && this.cursor == 0 ? 1 : Math.ceil(this.cursor / this.pageSize),
 66            pages: total != 0 && total < this.pageSize ? 1 : Math.ceil(total / this.pageSize)
 67        }
 68    },
 69
 70    onClick: function(which) {
 71        var store = this.store;
 72        var d = this.getPageData();
 73
 74        switch (which) {
 75            case 'first':
 76                this.doLoad(1);
 77                break;
 78            case 'prev':
 79                this.doLoad(Math.max(1, d.activePage - 1));
 80                break;
 81            case 'next':
 82                this.doLoad(Math.min(d.pages, d.activePage + 1));
 83                break;
 84            case 'last':
 85                this.doLoad(d.pages);
 86                break;
 87            case 'refresh':
 88                this.doLoad(d.activePage);
 89                break;
 90        }
 91    },
 92
 93    onPagingKeydown: function(e) {
 94        var k = e.getKey(), d = this.getPageData(), pageNum;
 95
 96        if (k == e.RETURN) {
 97            e.stopEvent();
 98
 99            pageNum = this.readPage(d)

            if (pageNum >= d.pages) {
                pageNum = d.pages;
            }
            else if (pageNum <= 1) {
                pageNum = 1;
            }

            this.doLoad(pageNum);

        }
        else if (k == e.HOME || k == e.END) {
            e.stopEvent();
            pageNum = k == e.HOME ? 1 : d.pages;
            this.field.dom.value = pageNum;
        }
        else if (k == e.UP || k == e.PAGEUP || k == e.DOWN || k == e.PAGEDOWN) {
            e.stopEvent();

            if (pageNum = this.readPage(d)) {
                var increment = e.shiftKey ? 10 : 1;

                if (k == e.DOWN || k == e.PAGEDOWN) {
                    increment *= -1;
                }

                pageNum += increment;

                if (pageNum >= 1 & pageNum <= d.pages) {
                    this.field.dom.value = pageNum;
                }
            }
        }
    }
});

Ext.reg('ux.pagingtoolbar', Ext.ux.PagingToolbar);