ExtJS自制表格Grid分页条

试过Grid自带的load和分页功能，没有成功，干脆就自己写了......

主要是查询条件比较复杂......

希望哪位大神能有更好的意见。

Ext.define('MyApp.ux.Pagination', {
    extend: 'Ext.Toolbar',
//    调用时用此名称
    alias: 'Pagination',
    autoDestroy : true,
    items : ['->',{
//        用于记录查询条件
        xtype : 'displayfield',
        itemId : 'objInPagination',
         hidden : true,
    },{
//        总页数记录
        xtype : 'numberfield',
        itemId : 'totalInPagination',
        hideTrigger : true,
        allowDecimals : false,
         allowBlank : false,
         hidden : true,
         value : 0 ,
        listeners : {
//            值改变时修改总页数显示
            change : function(newValue, oldValue, eOpts){
                var toolbar = this.up('toolbar');
                var pageInPagination = toolbar.down('#pageInPagination');
                var value = this.getRawValue().toString();
                pageInPagination.setMaxValue(parseInt(value));
                var displayfieldInPagination = toolbar.down('#displayfieldInPagination');
                displayfieldInPagination.setValue('/共' + value +'页');
            }
        }
    },{
//        每页条数
        xtype : 'numberfield',
        itemId : 'limitInPagination',
        hideTrigger : true,
         hidden : true,
        allowDecimals : false,
         allowBlank : false,
         value : 10 
    },{
        text : '上一页',
        handler : function(btn){
            var toolbar = btn.up('toolbar');
            var pageInPagination = toolbar.down('#pageInPagination');
            var page = pageInPagination.getValue() - 1;
            pageInPagination.setValue(page);
            var GoInPagination = toolbar.down('#GoInPagination');
            GoInPagination.handler(GoInPagination);
        }
    },{
//        当前页数
        xtype : 'numberfield',
        itemId : 'pageInPagination',
        hideTrigger : true,
        allowDecimals : false,
        minValue : 1,
         allowBlank : false,
         value : 1 ,
         maxValue : 0,
        width : 30
    },{
//        总页数显示
        xtype : 'displayfield',
        itemId : 'displayfieldInPagination',
        value : '/共0页',
    },{
        text : '下一页',
        handler : function(btn){
            var toolbar = btn.up('toolbar');
            var pageInPagination = toolbar.down('#pageInPagination');
            var page = pageInPagination.getValue() + 1;
            pageInPagination.setValue(page);
            var GoInPagination = toolbar.down('#GoInPagination');
            GoInPagination.handler(GoInPagination);
        }
    },{
        text : 'Go',
        itemId : 'GoInPagination',
        handler : function(btn){
            var toolbar = btn.up('toolbar');
            var pageInPagination = toolbar.down('#pageInPagination');
            var Grid = btn.up('grid');    
            if(pageInPagination.isValid()){
                var objHttpParams = toolbar.down('#objInPagination').getValue();
                var obj = {};
                obj.limit = toolbar.down('#limitInPagination').getValue();
                obj.page = toolbar.down('#pageInPagination').getValue();
                var tools = Ext.create('MyApp.Tools');
                var httpParams = tools.objectToHttpOgnlParams(obj,null,3) + '&' + objHttpParams;
                Grid.search(httpParams);
            }else{
//                页码不正确时清空表格内容，当前页数为0
                Grid.getStore().removeAll();
                pageInPagination.setValue(0);
            }
        }
    }],
    doSearch : function(limit,total,obj){
        this.down('#limitInPagination').setValue(limit);
        this.down('#totalInPagination').setValue(total);
        this.down('#pageInPagination').setValue(1);
        var tools = Ext.create('MyApp.Tools');
        var objHttpParams = tools.objectToHttpOgnlParams(obj,null,3);
        this.down('#objInPagination').setValue(objHttpParams);
        var GoInPagination = this.down('#GoInPagination');
        GoInPagination.handler(GoInPagination)
    }
  });

表格中的调用

/**
 * 
 */
Ext.define('MyApp.view.dict.operator.OperatorGrid', {
    extend : 'Ext.grid.Panel',
    requires : ['MyApp.store.Operator'],
    xtype : 'OperatorGrid',
    store : Ext.create('MyApp.store.Operator'),
//    分页条，bbar是在底部，tbar是在顶端
    bbar : Ext.create('MyApp.ux.Pagination'),
    columns : [{
        text : '账号',
        dataIndex : 'user',
        width : '14%'
    },{
        text : '姓名',
        dataIndex : 'name',
        width : '14%'
    }, {
        text : '部门',
        dataIndex : 'department',
        width : '14%',
        renderer : function(department) {
            return department.name;
        }
    },{
        text : '手机',
        dataIndex : 'mobile',
        width : '14%'
    }, {
        text : '座机',
        dataIndex : 'telphoneSet',
        width : '14%'
    }, {
        text : '邮箱',
        dataIndex : 'email',
        width : '14%'
    } , {
        text : '备注',
        dataIndex : 'remark',
        width : '16%'
    } ],
    title : '人员列表',
    search : function(httpParams){
//        与action交互，执行查询，httpParams是已定义好转码好的查询条件
        var operatorSearchForm = Ext.ComponentQuery.query('#OperatorSearchForm')[0];
        operatorSearchForm.submit({
        url : 'operatorSearchWithPage.action',
        params : httpParams,
        method : 'post',
        waitMsg:'稍安勿躁...',
        success : function(basicForm, action) {
//        执行查询成功后的操作
            var operatorGrid = Ext.ComponentQuery.query('#OperatorGridInSearchForm')[0];
            if (operatorGrid) {
                operatorGrid.setStore(Ext.create('MyApp.store.Operator', {
                            data : action.result.operators
                        }));
            }
        },
        failure : function() {
            Ext.Msg.alert('悲剧', '查询操作失败，请重试');
        }
    });
    }
});

 

 

查询按钮被点击时

    onClickSearchButton : function(btn) {//点击“查询”按钮执行
//        获取查询条件
        var operatorSearchForm = btn.up('form');
        var obj = operatorSearchForm.getViewModel().getData();
//查询条件obj转码
        var tools = Ext.create('MyApp.Tools');
        var httpParams = tools.objectToHttpOgnlParams(obj,null,3);
        operatorSearchForm.submit({//获取查询结果总条数
            url : 'operatorCount.action',
            params : httpParams,
            method : 'post',
            waitMsg:'稍安勿躁...',
            success : function(basicForm, action) {
//每页条数
                var limit = 10;
//总页数（查询总记录数除以每页条数，向上取整）
                var total = Math.ceil(action.result.total/limit);
//                找到对应显示的表格
                var OperatorGridInSearchForm = Ext.ComponentQuery.query('#OperatorGridInSearchForm')[0];
//找到表格下的分页条
                var toolbar = OperatorGridInSearchForm.down('toolbar');
//执行查询
                toolbar.doSearch(limit,total,obj);
            },
            failure : function() {
                Ext.Msg.alert('悲剧', '查询操作失败，请重试');
            }
        });
    },

最终效果