Ext4.0.2a的Paging Toolbar

Question

不好意思，我是剛學Ext的新手～不太懂...

這是我js代碼
/**

• @example Paging Toolbar *
• This example demonstrates loading data in pages dynamically from the server using a {@link Ext.toolbar.Paging Paging Toolbar}.
• Note, that since there is no back end (data is loaded from a static file at data/users.json) each page will show the same data set. */ Ext.require('Ext.data.Store'); Ext.require('Ext.grid.Panel'); Ext.require('Ext.toolbar.Paging');

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});

Ext.onReady(function() {

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    autoLoad: true,
    pageSize: 4,
    proxy: {
        type: 'ajax',
        url : 'data/users.json',
        reader: {
            type: 'json',
            root: 'users',
            totalProperty: 'total'
        }
    }
});

// specify segment of data you want to load using params，這邊是我看到網路上的，自己加的，想要讓他數據變得一樣
userStore.load({
params:{
start:0,

limit: 4
}
});

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    store: userStore,
    width: 400,
    height: 200,
    title: 'Application Users',
    columns: [
        {
            text: 'Name',
            width: 100,
            dataIndex: 'name'
        },
        {
            text: 'Email Address',
            width: 150,
            dataIndex: 'email'
        },
        {
            text: 'Phone Number',
            flex: 1,
            dataIndex: 'phone'
        }
    ],
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: userStore,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }]
});

});

這是我的json代碼
{
"success": true,
"total": 12,
"users": [
{ "name": "Lisa", "email": "[e-mail]", "phone": "555-111-1224" },
{ "name": "Bart", "email": "[e-mail]", "phone": "555-222-1234" },
{ "name": "Homer", "email": "[e-mail]", "phone": "555-222-1244" },
{ "name": "Marge", "email": "[e-mail]", "phone": "555-222-1254" }
]
}

我想問說為什麼得到的結果是這樣的http://docs.sencha.com/ext-js/4-0/guides/grid/examples/paging_toolbar/index.html

分頁後數據都一樣，我覺得有點疑惑...

因為我的json數據只有4筆，我想要每頁2筆且第一頁為Lisa和Bart第二頁為Homer和Merge的話跟怎麼改？

謝謝大家～ :)

Answer 1

是的，就是Ext.data.proxy.Memory类，Ext.data.MemoryProxy是向后兼容保留的ExtJS 3的名。
使用PageToolbar分页都是采用服务器端分页的，数据按页读取。Extjs本地分页并不支持，如果非要这样，你需要把PageToolbar里的store里使用的proxy采用Ext.data.proxy.Memory，并重写store的load方法（这需要你扩展该类），在调用load时分批加载数据（你需要自己把数组截断，比如这里的“users”）。

如果你是初学者，不需要弄太复杂，先了解怎么使用，然后再了解组件的内部运行。