ext2.x中GridPanel本地数据分页的问题

Question

由于数据量不多,大概3,40条,不分页又太长了,又不想服务器分页(很多东西写死了不好改),琢磨了一下怎么本地分页,还是没搞出来,请大家指点一下,我是用store的loadData把数据载入,PagingToolbar读到了数据，但是无法分页，也想不出来该怎么改了
[code="js"]
cxtjFormPanel = Ext.extend(Ext.form.FormPanel,{
constructor:function(){
this.addEvents("query");
this.addEvents("reset");

    cxtjFormPanel.superclass.constructor.call(this,{
        autoHeight:true,
        baseCls:"x-plain",
        layout:"column",
        width:550,
        labelWidth:80,
        items:[
            {
                columnWidth:.5,
                defaults:{width:160},
                defaultType:"textfield",
                bodyStyle:"padding:5px",
                layout:"form",
                items:[
                    {
                        fieldLabel:"案件登记序号",
                        name:"ajdjXh",
                        maxLength:14
                    },{
                        fieldLabel:"纳税人编码",
                        name:"nsrbm",
                        maxLength:20
                    }
                ]
            },{
                columnWidth:.5,
                defaults:{width:160},
                defaultType:"textfield",
                bodyStyle:"padding:5px",
                layout:"form",
                items:[
                    {
                        fieldLabel:"案源登记序号",
                        name:"aydjXh",
                        maxLength:14
                    },{
                        fieldLabel:"纳税人名称",
                        name:"nsrmc"
                    }
                ]
            }
        ],
        buttons:[
            {
                text:"查询",
                handler:function(){
                    try{
                        this.onQuery();
                    }catch(e){
                        return;
                    }
                },
                scope:this
            },{
                text:"清空",
                handler:function(){
                    this.onReset();
                },
                scope:this
            }
        ]
    });
},

onQuery:function(){
    if(this.getForm().isValid())
        this.fireEvent("query",this.getForm());
    else
        throw Error();
},

onReset:function(){
    this.fireEvent("reset",this.getForm());
}

});

ajxxGridPanel = Ext.extend(Ext.grid.GridPanel,{
data:null,
constructor:function(){
this.addEvents("delete");

    this.data = new Ext.data.JsonStore({
        fields:["ajdjxh","aydjxh","nsrmc","ajmc","ajzt"]
    }),

    ajxxGridPanel.superclass.constructor.call(this,{
        title:"案件信息列表",
        autoHeight:true,
        frame:true,
        width:660,
        loadMask:{msg:"正在加载,请稍后..."},
        tbar:[
            {
                text:"删除案件",
                handler:function(){
                    try{
                        this.onDelete();
                    }catch(e){
                        Ext.Msg.alert("提示","请选择要删除的案件!");
                        return;
                    }
                },
                scope:this
            },"-"
        ],
        columns:[
            new Ext.grid.CheckboxSelectionModel(),
            {header:"案件编号",dataIndex:"ajdjxh",width:100},
            {header:"案源编号",dataIndex:"aydjxh",width:100},
            {header:"纳税人名称",dataIndex:"nsrmc",width:170},
            {header:"案件名称",dataIndex:"ajmc",width:170},
            {header:"案件状态",dataIndex:"ajzt",width:110}
        ],
        store:this.data,

// bbar: new Ext.PagingToolbar({
// pageSize: 10,

// store:this.data,
// displayInfo: true,

// displayMsg: '第{0} 到 {1} 条数据 共{2}条',

// emptyMsg: "没有数据"

// }),

sm:new Ext.grid.RowSelectionModel({
singleSelect:true
})
});
},

loadData:function(_data){
    this.getStore().loadData(_data,false);
},

onDelete:function(){
    if(this.getSelectionModel().getCount()>0)
        this.fireEvent("delete",this,this.getStore(),this.getSelectionModel().getSelected());
    else
        throw Error();
}

});

ViewPanel = Ext.extend(Ext.Panel,{
form:null,
grid:null,
constructor:function(){
this.form = new cxtjFormPanel();
this.grid = new ajxxGridPanel();

    ViewPanel.superclass.constructor.call(this,{
        title:"删除案件信息",
        plain:true,
        frame:true,
        autoHeight:true,
        //height:450,
        items:[
            this.form,
            this.grid
        ]
    });
}

});

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.TextField.prototype.msgTarget = "side";

var _view = new ViewPanel();
_view.render(Ext.getBody());

_view.form.on("query",function(_form){
    //_form["waitMsgTarget"] = this.getEl();
    _form.submit({
        url:"/qt/qt036JcScajxxExt-query.pfv",
        waitMsg:"正在查询,请稍后...",
        success:function(_f,_a){
            this.grid.loadData(_a.result.data);
        },
        failure:function(_f,_a){
            Ext.Msg.alert("错误","查询失败!");
        },
        scope:this
    });
},_view);

_view.form.on("reset",function(_form){
    _form.reset();
},_view);

_view.grid.on("delete",function(_grid,_store,_record){
    Ext.Msg.confirm("提示","是否删除案件["+_record.data.ajmc+"]?",function(_btn){
        if(_btn=="yes"){
            this.grid.getEl().mask("正在删除,请稍后...");
            Ext.Ajax.request({
                url:"/qt/qt036JcScajxxExt-delete.pfv",
                params:{ajdjXh:_record.data.ajdjxh,aydjXh:_record.data.aydjxh},
                success:function(_response){
                    var _result = Ext.util.JSON.decode(_response.responseText);

                    if(_result.state == "info"){
                        _store.remove(_record);
                    }
                    Ext.Msg.alert("提示",_result.message);
                    this.grid.getEl().unmask();
                },
                failure:function(){
                    Ext.Msg.alert("错误","删除案件失败!");
                    this.grid.getEl().unmask();
                },
                scope:this
            });
        }
    },this)
},_view);

});
[/code]

Answer 1

找个PagingMemoryProxy

把PagingMemoryProxy.js从examples/locale/目录下copy过来，导入html里：

把以前的MemoryProxy换成PagingMemoryProxy。

var ds = new Ext.data.Store({
proxy: new Ext.data.PagingMemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});

好了，现在直接调用ds.load({params:{start:0,limit:3}})

PangingMemoryProxy.js
[code="js"]
/*

• Ext JS Library 2.0
• Copyright(c) 2006-2007, Ext JS, LLC.
• [e-mail]
• http://extjs.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;
};
}

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

Ext.extend(Ext.data.PagingMemoryProxy, Ext.data.MemoryProxy, {
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 (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;
        };
        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, arg, true);
}

});

[/code]