directFn

using directFn as the server side

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">

JavaScript

var myData = {"data":[
    {"item_code":"ASCM72X36","quantity":1},
    {"item_code":"ASCM72X60","quantity":2},
    {"item_code":"ASCM72X33","quantity":3},
    {"item_code":"ASCM72X44","quantity":4},
    {"item_code":"ASCM72X55","quantity":5},
    {"item_code":"ASCM72X66","quantity":6},
    {"item_code":"ASCM72X77","quantity":7}
]};
var myDirectfn = function(opts, fn, proxy) {
    var data = myData.data || myData;
    var start = opts.start,
        end = opts.page * opts.limit,
        result = [];
    if (end > data.length) end = data.length;
    for (var i = start; i < end; i++)
        result.push(data[i]);
    console.log(result);
    result.total = data.length;
    fn(0, {
        status: true,
        result: result
    });
};
myDirectfn.directCfg = {
    method: {}
};

var store = new Ext.data.Store({
    //totalProperty : 8,
    pageSize: 4,
    proxy: {
        type: 'direct',
        directFn: myDirectfn,
        reader: {
            type: 'json'
        }
    },
    fields: [{
        name: 'item_code'},
    {
        name: 'quantity'}]
});


//store.loadData(myData);
var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [{
        id: 'item_code',
        header: "Item code",
        width: 160,
        sortable: true,
        dataIndex: 'item_code'},
    {
        header: "quantity",
        width: 75,
        sortable: true,
        dataIndex: 'quantity'}],
    stripeRows: true,
    autoExpandColumn: 'fullName',
    height: 350,
    width: 600,
    title: 'Array Grid',
    bbar: new Ext.PagingToolbar({
        store: store,
        pageSize: 4,
        displayInfo: true,
        disabled: true
    }),
    viewConfig: {
        forceFit: true
    }
});
grid.render(Ext.getBody());
store.on('load', function(){
  grid.down('pagingtoolbar').enable();
});
setTimeout(function(){store.load();}, 1500)