ExtJS grid Panel Paging toolbar not showing required number of records per page

问题

I am new to extJS and I am trying to show 8[a random number] records in a grid panel and am also using paging toolbar to show 4 records per page but it shows 8 records in one page only.

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
    }
});

Can anyone tell me how can I solve this problem?

回答1:

instead of using the store.loadData() call you should be calling the .load() function on the store and passing in an object with arguments specifying your maximum page size.

check out the examples on this page http://dev.sencha.com/deploy/ext-3.3.1/docs/?class=Ext.PagingToolbar

EDIT: Another option is to do the following. Call the .loadData() and after you have instantiated your grid, you can call

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

回答2:

You can use the Ext.ux.data.PagingStore for client side paging.
Try something like this:

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
});

You may need to tweak this a bit as I have not tested it.
I have it working with a JsonReader fetching records from the server. Hope this helps.

来源：https://stackoverflow.com/questions/6276856/extjs-grid-panel-paging-toolbar-not-showing-required-number-of-records-per-page

标签

extjs

gridpanel