创建EXT支持分页的Array Grid（收集整理）

前因：

项目需要，快速DEMO，采用EXT组件，想在纯HTML+JS的环境下给客户展示分页效果

 

后果：

example、API都没有找到，想组合Array Grid 和 Paging两个示例，达不到目的...

GG、BAIDU，找到 高手提供 示例链接：http://ido.nl.eu.org/ext-pagingmemoryproxy/

EXT论坛相关帖子：http://extjs.com/forum/showthread.php?p=56759

恩，要学好E文啊！自勉！

附高手扩展的data.proxy的代码：

js 代码

/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * [email protected]
 *
 * http://www.extjs.com/license
 */

/**
  * Ext.ux.data.PagingMemoryProxy.js
  *
  * A proxy for local / in-browser data structures
  * supports paging / sorting / filtering / etc
  *
  * @file   Ext.ux.PagingMemoryProxy.js
  * @author Ing. Ido Sebastiaan Bas van Oostveen
  *
  * @changelog:
  * @version    1.3
  * @date       30-September-2007
  *             - added customFilter config option
  * @version    1.2
  * @date   29-September-2007
  *     - fixed several sorting bugs
  * @version    1.1
  * @date   30-August-2007
  * @version    1.0
  * @date   22-August-2007
  *
  */

Ext.namespace("Ext.ux");
Ext.namespace("Ext.ux.data");

/* 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;
     };
}

/* Paging Memory Proxy, allows to use paging grid with in memory dataset */
Ext.ux.data.PagingMemoryProxy = function(data, config) {
    Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);
    this.data = data;
    Ext.apply(this, config);
};

Ext.extend(Ext.ux.data.PagingMemoryProxy, Ext.data.MemoryProxy, {
    customFilter: null,

    load : function(params, reader, callback, scope, arg) {
        params = params || {};
        var result;
        try {
            result = reader.readRecords(this.data);
        } catch(e) {
            this.fireEvent("loadexception", this, arg, null, e);
            callback.call(scope, null, arg, false);
            return;
        }

        // filtering
        if (this.customFilter!=null) {
            result.records = result.records.filter(this.customFilter);
            result.totalRecords = result.records.length;
        } else 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(r1, r2){
                return r1==r2 ? 0 : r1<r2 ? -1 : 1;
                };
            var st = reader.recordType.getField(params.sort).sortType;
            result.records.sort(function(a, b) {
                var v = 0;
                if (typeof(a)=="object"){
                    v = fn(st(a.data[params.sort]), st(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, arg, true);
    }
});

 

应用示例代码：

js 代码

var Example = {
    init : function(){
        // some data yanked off the web
        var myData = [
            ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
            ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
            ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
            ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
            ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
            ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
        ];

        var ds = new Ext.data.Store({
                proxy: new Ext.ux.data.PagingMemoryProxy(myData),
                reader: new Ext.data.ArrayReader({}, [
                       {name: 'company'},
                       {name: 'price', type: 'float'},
                       {name: 'change', type: 'float'},
                       {name: 'pctChange', type: 'float'},
                       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
                  ])
        });
        ds.load();

        // example of custom renderer function
        function italic(value){
            return '<i>' + value + '</i>';
        }

        // example of custom renderer function
        function change(val){
            if(val > 0){
                return '<span style="color:green;">' + val + '</span>';
            }else if(val < 0){
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }
        // example of custom renderer function
        function pctChange(val){
            if(val > 0){
                return '<span style="color:green;">' + val + '%</span>';
            }else if(val < 0){
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }

        // the DefaultColumnModel expects this blob to define columns. It can be extended to provide
        // custom or reusable ColumnModels
        var colModel = new Ext.grid.ColumnModel([
            {id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ]);


        // create the Grid
        var grid = new Ext.grid.Grid('grid-example', {
            ds: ds,
            cm: colModel,
            autoExpandColumn: 'company',
            selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
            enableColLock:false,
            enableDragDrop:false,
            loadMask: true
        });

        var layout = Ext.BorderLayout.create({
            center: {
                margins:{left:3,top:3,right:3,bottom:3},
                panels: [new Ext.GridPanel(grid)]
            }
        }, 'grid-panel');

        grid.render();


        var gridFooter = grid.getView().getFooterPanel(true);
        var paging = new Ext.PagingToolbar(gridFooter, ds, {
                        pageSize: 5,
                        displayInfo: true,
                        displayMsg: '当前记录 {0} - {1} ，共 {2}',
                        emptyMsg: "No queues to display"
                    });
        ds.load({params:{start:0, limit:5}});


    }
};
Ext.onReady(Example.init, Example);

 

附：

在EXT2.0里，已经不支持 grid.getView().getFooterPanel(true) 啦。直接作为bbr定义在Ext.grid.GridPanel里。