Question

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?

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