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

而不是使用store.loadData（）调用，你应该调用商店上的.load（）函数，并传入一个带有参数的对象来指定你的最大页面大小。

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

编辑：另一个选择是执行以下操作。调用.loadData（）并在实例化网格后，可以调用

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

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

2 个答案: