PagingToolbar 扩展

Ext.namespace('Ext.ux.PagingToolbarEx');

Ext.ux.PagingToolbarEx = Ext.extend(Ext.PagingToolbar, {
    space : ' ',
    beforePageText : '',
    afterPageText : '',
    randomId : 0,
    formArrays : function(arys, cur_page) {

        for(var i=0; i<arys.length; i++) {
            var page_dom = null;
            if(!Ext.get('page_dom_'+this.randomId+'_'+i)) {
                page_dom = Ext.get(this.addDom({
                    tag: 'span',
                    type: 'text',
                    id: 'page_dom_'+this.randomId+'_'+i,
                    html: this.space+arys[i]+this.space
                }).el);
            } else {
                page_dom = Ext.get('page_dom_'+this.randomId+'_'+i);
            }

            if(page_dom) {
                page_dom.dom.innerHTML = (arys[i]=='')?'':(this.space+arys[i]+this.space);
                if(arys[i]!='' && arys[i]!='...' && arys[i]!=cur_page) {
                    page_dom.dom.style.cursor = 'pointer';
                    page_dom.dom.style.color = '#6294E5';
                    //page_dom.dom.style.fontWeight = 'bold';
                }
                if(arys[i] == cur_page) {
                    page_dom.dom.style.cursor = '';
                    page_dom.dom.style.color = '#000000';
                }
                page_dom.removeAllListeners();
                if(arys[i] == '...' || arys[i] == '' || arys[i]==cur_page) {
                    page_dom.on('click',function() {});
                } else if(typeof(arys[i]) == 'number') {
                    page_dom.on('click',function(e,k) {
                        var cur_page = parseInt(k.textContent || k.innerText);
                        var total = this.store.getTotalCount();
                        var pages = Math.ceil(total/this.pageSize);
                        this.doLoad((cur_page-1) * this.pageSize);
                    }, this);
                }
            }
        }
    },
    formPage : function() {
        
        //this.cursor  0,1,2...
        //var cur_page = Math.ceil((this.cursor+this.pageSize)/this.pageSize)  1,2,3...
        //this.cursor+1, this.cursor+count, this.store.getTotalCount()   11-20 of 45
        //var pages = Math.ceil(this.store.getTotalCount()/this.pageSize)  total 45 pages
        var cur_page = Math.ceil((this.cursor+this.pageSize)/this.pageSize);
        var total = this.store.getTotalCount();
        var pages = Math.ceil(total/this.pageSize);
        var arrays = [];
        if(pages <= 10) {
            for(var i=0; i<11; i++) {
                if(i<pages) arrays.push(i+1);
                else arrays.push('');
            }
        } else {
            if(cur_page <= 6) {
                for(var i=0; i<11; i++) {
                    if(i<=8) arrays.push(i+1);
                    else if(i==9) arrays.push('...');
                    else if(i==10) arrays.push(pages);
                }
            } else if(cur_page > 6 && cur_page < (pages-5)) {
                for(var i=0; i<11; i++) {
                    if(i==0) arrays.push(i+1);
                    else if(i==1 || i==9) arrays.push('...');
                    else if(i>1 && i<9) arrays.push(cur_page-(5-i));
                    else if(i==10) arrays.push(pages);
                }
            } else if(cur_page >= (pages-5)) {
                for(var i=0; i<11; i++) {
                    if(i==0) arrays.push(i+1);
                    else if(i==1) arrays.push('...');
                    else arrays.push(pages-(10-i));
                }
            }
        }

        this.formArrays(arrays, cur_page);
    },
    // private
    onRender : function(ct, position){
        this.randomId = Math.random();
        Ext.PagingToolbar.superclass.onRender.call(this, ct, position);
        this.first = this.addButton({
            tooltip: this.firstText,
            //iconCls: "x-tbar-page-first",
            hide: true,
            text: '',
            disabled: true,
            handler: this.onClick.createDelegate(this, ["first"])
        });
        this.prev = this.addButton({
            tooltip: this.prevText,
            //iconCls: "x-tbar-page-prev",
            text: '<span style="color:#6294E5"><< Previous</span>',
            disabled: true,
            handler: this.onClick.createDelegate(this, ["prev"])
        });
        this.addSeparator();
        this.add(this.beforePageText);


        this.field = Ext.get(this.addDom({
           //tag: "input",
           //type: "text",
           //size: "3",
           //value: "1",
           //cls: "x-tbar-page-number"
           tag: "span",
           type: "text",
           html: ''
        }).el);
        
        for(var i=0; i<11; i++) {
            this.addDom({
                tag: 'span',
                type: 'text',
                id: 'page_dom_'+this.randomId+'_'+i,
                html: ''
            })
        }

        this.field.on("keydown", this.onPagingKeydown, this);
        this.field.on("focus", function(){this.dom.select();});
        this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
        this.field.setHeight(18);
        this.addSeparator();
        this.next = this.addButton({
            tooltip: this.nextText,
            //iconCls: "x-tbar-page-next",
            text: '<span style="color:#6294E5">Next >></span>',
            style: 'color:#77AAFF',
            disabled: true,
            handler: this.onClick.createDelegate(this, ["next"])
        });
        this.last = this.addButton({
            tooltip: this.lastText,
            //iconCls: "x-tbar-page-last",
            hide: true,
            text: '',
            disabled: true,
            handler: this.onClick.createDelegate(this, ["last"])
        });
        this.addSeparator();
        this.loading = this.addButton({
            tooltip: this.refreshText,
            iconCls: "x-tbar-loading",
            handler: this.onClick.createDelegate(this, ["refresh"])
        });

        if(this.displayInfo){
            this.displayEl = Ext.fly(this.el.dom).createChild({cls:'x-paging-info'});
        }
        if(this.dsLoaded){
            this.onLoad.apply(this, this.dsLoaded);
        }
    },
    // private
    onLoad : function(store, r, o){
        if(!this.rendered){
            this.dsLoaded = [store, r, o];
            return;
        }
       this.cursor = o.params ? o.params[this.paramNames.start] : 0;
       var d = this.getPageData(), ap = d.activePage, ps = d.pages;

       this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
       this.field.dom.value = ap;
       this.first.setDisabled(ap == 1);
       this.prev.setDisabled(ap == 1);
       this.next.setDisabled(ap == ps);
       this.last.setDisabled(ap == ps);
       this.loading.enable();
       this.updateInfo();
       this.formPage();
    }
});

Ext.reg('pagingtoolbarex', Ext.ux.PagingToolbarEx);