ExtJS 网格面板分页工具栏未显示每页所需的记录数

Question

我是 extJS 的新手，我试图在网格面板中显示 8[随机数] 条记录，并且还使用分页工具栏每页显示 4 条记录，但它仅在一页中显示 8 条记录。

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'],
    ['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'],
    ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];

var store = new Ext.data.ArrayStore({
    totalProperty: 8,
    autoLoad: {
        params: {
            start: 0,
            limit: 4
        }
    },
    fields: [{
        name: 'company'
    }, {
        name: 'price',
        type: 'float'
    }, {
        name: 'change',
        type: 'float'
    }, {
        name: 'pctChange',
        type: 'float'
    }, {
        name: 'lastChange',
        type: 'date',
        dateFormat: 'n/j h:ia'
    }]
});

store.loadData(myData);

var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [{
        id: 'company',
        header: "Company",
        width: 160,
        sortable: true,
        dataIndex: 'company'
    }, {
        header: "Price",
        width: 75,
        sortable: true,
        renderer: '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'
    }],
    stripeRows: true,
    autoExpandColumn: 'company',
    height: 350,
    width: 600,
    title: 'Array Grid',

    bbar: new Ext.PagingToolbar({
        store: store,
        pageSize: 4,
        displayInfo: true
    }),
    viewConfig: {
        forceFit: true
    }
});

谁能告诉我如何解决这个问题？

Answer 1

您可以使用 Ext.ux.data.PagingStore 进行客户端分页。
尝试这样的事情：

var store = new Ext.ux.data.PagingStore({
    reader: new Ext.data.ArrayReader({
        fields: [
                 {name: 'company'},
                 {name: 'price', type: 'float'},
                 {name: 'change', type: 'float'},
                 {name: 'pctChange', type: 'float'},
                 {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
                ],
    }),
    totalProperty : 8,
    autoLoad:{
        params:{start:0, limit:4}
    },
    data: myData
});

您可能需要稍微调整一下，因为我还没有测试过它。
我让它与从服务器获取记录的 JsonReader 一起使用。
希望这有帮助。

Answer 2

您应该在存储上调用 .load() 函数，并传入一个带有指定最大页面大小的参数的对象，而不是使用 store.loadData() 调用。

查看此页面上的示例 http://dev .sencha.com/deploy/ext-3.3.1/docs/?class=Ext.PagingToolbar

编辑：另一种选择是执行以下操作。调用 .loadData()，实例化网格后，您可以调用

grid.store.load({params:{start: 0, limit: 4}});