Ext7借助PagingMemoryProxy实现前台分页

Ext7借助PagingMemoryProxy实现前台分页

1.将PagingMemoryProxy作为单独js文件放入工程，代码如下（不必在意版本号）

/*!
 * Ext JS Library 3.4.0
 * Copyright(c) 2006-2011 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */

/* Fix for Opera, which does not seem to include the map function on Array's */
if (!Array.prototype.map) {
    Array.prototype.map = function(fun){
        var len = this.length;
        if (typeof fun != 'function') {
            throw new TypeError();
        }
        var res = new Array(len);
        var thisp = arguments[1];
        for (var i = 0; i < len; i++) {
            if (i in this) {
                res[i] = fun.call(thisp, this[i], i, this);
            }
        }
        return res;
    };
}

Ext.ns('Ext.ux.data');

/**
 * @class Ext.ux.data.PagingMemoryProxy
 * @extends Ext.data.MemoryProxy
 * <p>Paging Memory Proxy, allows to use paging grid with in memory dataset</p>
 */
Ext.ux.data.PagingMemoryProxy = Ext.extend(Ext.data.MemoryProxy, {
    constructor : function(data){
        Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);
        this.data = data;
    },
    doRequest : function(action, rs, params, reader, callback, scope, options){
        params = params ||
        {};
        var result;
        try {
            result = reader.readRecords(this.data);
        } 
        catch (e) {
            this.fireEvent('loadexception', this, options, null, e);
            callback.call(scope, null, options, false);
            return;
        }
        
        // filtering
        if (params.filter !== undefined) {
            result.records = result.records.filter(function(el){
                if (typeof(el) == 'object') {
                    var att = params.filterCol || 0;
                    return String(el.data[att]).match(params.filter) ? true : false;
                }
                else {
                    return String(el).match(params.filter) ? true : false;
                }
            });
            result.totalRecords = result.records.length;
        }
        
        // sorting
        if (params.sort !== undefined) {
            // use integer as params.sort to specify column, since arrays are not named
            // params.sort=0; would also match a array without columns
            var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
            var fn = function(v1, v2){
                return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
            };
            result.records.sort(function(a, b){
                var v = 0;
                if (typeof(a) == 'object') {
                    v = fn(a.data[params.sort], b.data[params.sort]) * dir;
                }
                else {
                    v = fn(a, b) * dir;
                }
                if (v == 0) {
                    v = (a.index < b.index ? -1 : 1);
                }
                return v;
            });
        }
        // paging (use undefined cause start can also be 0 (thus false))
        if (params.start !== undefined && params.limit !== undefined) {
            result.records = result.records.slice(params.start, params.start + params.limit);
        }
        callback.call(scope, result, options, true);
    }
});

//backwards compat.
Ext.data.PagingMemoryProxy = Ext.ux.data.PagingMemoryProxy;

2.在html中引入PagingMemoryProxy，如下图所示

3.下方为表格示例，其中store的proxy、表格面板dockedItems中的listeners必不可少，其他地方可以根据自己需求进行修改

/**
 * 创建表格方法
 * @param obj 
 */
function createTable(){
	var pagesize = 6;
	var strategyDetailsStore = Ext.create('Ext.data.Store', {
		pageSize:pagesize,
		id:'strategyDetailsStore',//store id
		fields : ['id','code','description','contract','region','type','date','starttime','endtime','cap','time'],
		data:[],
        proxy: new Ext.ux.data.PagingMemoryProxy({//此处proxy不可缺少
            type: 'pagingmemory',
            reader: {
                type: 'json',
                totalProperty:'total'
            }
        })
	});		

	var strategyDetailsPanel = Ext.create('Ext.grid.Panel', {
		header : false,
		store : strategyDetailsStore,
		height : 280,
		width : 1600,
		pageSize : pagesize,
		region : 'center',
		autoheight : true,
		stripeRows:true,//斑马纹效果
		trackMouseOver : false,
		id : 'strategyDetailsGrid',
		border:true,
		columns : [
			{text:'序号',dataIndex:'id',width:80,align:'center'},
			{text:'代码',dataIndex:'code',width:150,align:'center'},
			{text:'描述',dataIndex:'description',width:210,align:'center'},
			{text:'所属合约',dataIndex:'contract',width:150,align:'center'},
			{text:'所属区域',dataIndex:'region',width:150,align:'center'},
			{text:'类型',dataIndex:'type',width:150,align:'center'},
			{text:'日期',dataIndex:'date',width:150,align:'center'},
			{text:'开始时间',dataIndex:'starttime',width:100,align:'center'},
			{text:'结束时间',dataIndex:'endtime',width:100,align:'center'},
			{text:'cap(kWh)',dataIndex:'cap',width:175,align:'center'},
			{text:'计划时间(分钟)',dataIndex:'time',width:175,align:'center'}
		],
		dockedItems: [{
            xtype: 'pagingtoolbar',
            store: strategyDetailsStore,//表格store
            dock: 'bottom',
            inputItemWidth: 50, 
            displayInfo: true,
            listeners : {  //最重要的
                "change" : function(bbar, params){
                	var tmp = [];
                	for(var i = params.fromRecord-1; i < params.toRecord; i ++){
                		tmp.push(this.store.getProxy().data[i]);
                	}
                	this.store.loadData(tmp);
                }  
            }  
        }]
	});
	return strategyDetailsPanel;
};

4.加载数据

//假设需要加载的数据名为tmp
Ext.getStore('strategyDetailsStore').getProxy().data = tmp; 
Ext.getStore('strategyDetailsStore').loadPage(1); 

特殊原因，效果不便展示

请尊重原创，转载请注明出处