PagingToolbar 사용

Ext의 PagingToolbar 메인 키는store에 두 개의 인자가 있어야 합니다: limit와start. 이렇게 해야만 PagingToolbar가 이 두 개의 인자에 따라 페이지 처리를 할 수 있습니다.
그러나 만약에 백그라운드 응용 프로그램의 페이지가pagenum과pagesize에 따라 처리된다면, 페이지의 효과를 실현하기 위해 일을 해야 한다.
 
메서드 1: Ext 구성 요소를 변경하지 않습니다.
서버에서 limit와start의 매개 변수를 가져와서 연산을 통해pagenum을 얻을 수 있으며, limit는 직접pagesize로 사용할 수 있습니다.
이런 방식은 네가 서버 측의 코드를 수정해야 한다.
 
메서드 2: Ext의 PagingToolbar 구성 요소를 확장합니다.
주: 다음 코드를 인터넷에서 찾았습니다. 작가님께 다시 한 번 감사드립니다.

Ext.PagingToolbarEx = Ext.extend(Ext.PagingToolbar, {
    afterPageText: '/ {0}',
    beforePageText: ' ',
    displayInfo: true,
    displayMsg: '  {0} - {1} / {2}',
    emptyMsg: ' ',
    firstText: ' ',
    prevText: ' ',
    nextText: ' ',
    lastText: ' ',
    refreshText: ' ',
    
    updateInfo: function(){
        if(this.displayEl){
            var count = this.store.getCount();
            
            var msg = count == 0 ? this.emptyMsg : String.format(this.displayMsg, this.cursor, this.cursor + count - 1, this.store.getTotalCount());
            
            this.displayEl.update(msg);
        }
    },
    
    onLoad: function(store, r, o){
        if(!this.rendered){
            this.dsLoaded = [store, r, o];
            
            return;
        }
        
        if(!o.params || this.store.getTotalCount() == 0){
            this.cursor = 0;
        }
        else{
            this.cursor = (o.params[this.paramNames.start] - 1) * this.pageSize + 1;
        }
        
        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 || ps == 0);
        this.prev.setDisabled( ap == 1 || ps == 0);
        this.next.setDisabled(ap == ps || ps == 0);
        this.last.setDisabled(ap == ps || ps == 0);
        this.loading.enable();
        this.loading.setDisabled(ps == 0);
        this.updateInfo();    
    },
    
    getPageData: function(){
        var total = this.store.getTotalCount();
        
        return {
            total: total,
            activePage: total != 0 && this.cursor == 0 ? 1 : Math.ceil(this.cursor / this.pageSize),
            pages: total !=0 && total < this.pageSize ? 1 : Math.ceil(total / this.pageSize)
        }
    },
    
    onClick: function(which){
        var store = this.store;
        var d = this.getPageData();
        
        switch(which){
            case 'first':
                this.doLoad(1);
                break;
            case 'prev':
                this.doLoad(Math.max(1, d.activePage - 1));
                break;
            case 'next':
                this.doLoad(Math.min(d.pages, d.activePage + 1));
                break;
            case 'last':
                this.doLoad(d.pages);
                break;
            case 'refresh':
                this.doLoad(d.activePage);
                break;
        }
    },
    
    onPagingKeydown: function(e){
        var k = e.getKey(), d = this.getPageData(), pageNum;
        
        if(k == e.RETURN){
            e.stopEvent();
            
            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('pagingtoolbarex', Ext.PagingToolbarEx);

이런 방법의 장점은 백그라운드가 어떠한 수정도 하지 않고 백그라운드가 다른 제3자가 제공하는 응용 장소에 비교적 적합하다는 것이다