Javascript 如何将分页添加到ExtJS4网格？

我有一个这样的存储，我用它来存储extjs网格

Ext.create('Ext.data.Store', {
    autoLoad : true,
    fields   : [
        {name: 'item_code', mapping: 'item_code', type: 'string'},
        {name: 'quantity', mapping: 'quantity', type: 'string'},
        {name: 'description', mapping: 'description', type: 'string'},
        {name: 'selling_price', mapping: 'selling_price', type: 'string'},
        {name: 'discount', mapping: 'discount', type: 'string'}
    ],
    storeId  : 'available_products',
    proxy    : {
        type            : 'ajax',
        actionMethods   : 'POST',
        url             : 'http://192.168.1.6/transactions/distribution_store',
        reader: {
            type: 'json',
            root: 'data'
        }
    }
});

我想在网格中添加一个分页，但我希望这样

首先用json加载所有数据，并在客户端分页这些结果，而不发送服务器请求

可能吗？ 如何做到这一点

---

考虑加载所有使用的数据

var myData = [];
Ext.Ajax.request({
    url: 'http://192.168.1.6/transactions/distribution_store',
    method: 'POST',
    success: function(response){
        myData = Ext.decode(response.responseText);
    }
});

加载所有数据后，您可以利用

directFn

config来模拟分页功能。更多信息，请查看我的答案。还有退房

更新 该解决方案不适用于ExtJS4.1.1。你能为这个版本提供一个例子吗

extjs4.2也不适用

---

directFn

解决方案对我来说总是像一个黑客。自4.0.7以来，无需使用

directFn

。而是使用。演示是

谢谢你的回答，我试过这样做，但是没有加载任何东西可能是因为我的json输出，我的json输出像{“数据”：[{“item_code”：“ASCM72X36”，“quantity”：4}，{“item_code”：“ASCM72X60”，“quantity”：4}]}@Gihan，哪个部分不起作用？通过Ajax.request从服务器加载或用加载的数据填充网格？用数据填充网格。似乎是一个解码problem@Gihan，我已经为您的json输出更新了详细信息。非常感谢，感谢您的帮助。感谢AgainPagin功能（分页工具栏）独立于“记录加载”（存储）功能。您可以使用本地存储设置分页工具栏。它不必是远程/直接存储。因此，不要在存储中定义代理，而是在存储外部加载记录，然后只调用store.loadData（）一次来加载存储。之后，分页工具栏将关闭存储区中的记录。