title: Using Paging toolbar with Grid Panel
body: <p>I am stuck at this point since a long time. Please help me identify my error.</p>
  
  <p>I am trying to show data in grid panel and since data is large I am also using Paging Toolbar. This is my code (I am not sure but I think problem is in store that I am creating).</p>
  
  <pre><code>var myData = {
    record: [{
        name: "Record 0",
        column1: "0",
        column2: "0"
      }, {
        name: "Record 1",
        column1: "1",
        column2: "1"
      }, {
        name: "Record 2",
        column1: "2",
        column2: "2"
      },
    ]
  };
  var fields = [{
      name: 'name',
      mapping: 'name'
    }, {
      name: 'column1',
      mapping: 'column1'
    }, {
      name: 'column2',
      mapping: 'column2'
    }
  ];
  var store = new Ext.data.Store({
    id: 'simpsonsStore',
    fields: ['name', 'column1', 'column2'],
    pageSize: 5, // items per page
    data: myData,
    reader: {
      root: 'record',
      type: 'json'
    }
  });
  // Column Model shortcut array
  var cols = [{
      id: 'name',
      header: "Record Name",
      width: 50,
      sortable: true,
      dataIndex: 'name'
    }, {
      header: "column1",
      width: 50,
      sortable: true,
      dataIndex: 'column1'
    }, {
      header: "column2",
      width: 50,
      sortable: true,
      dataIndex: 'column2'
    }
  ];
  store.load({
    params: {
      start: 0,
      limit: 5
    }
  });
  // declare the source Grid
  var grid = new Ext.grid.GridPanel({
    ddGroup: 'gridDDGroup',
    store: store,
    columns: cols,
    enableDragDrop: true,
    stripeRows: true,
    autoExpandColumn: 'name',
    width: 650,
    height: 325,
    region: 'west',
    title: 'Data Grid',
    selModel: new Ext.grid.RowSelectionModel({
      singleSelect: true
    }),
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: store, // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
      }
    ]
  });
  var displayPanel = new Ext.Panel({
    width: 650,
    height: 300,
    layout: 'column',
    renderTo: Ext.getBody(),
    items: [
      grid
    ],
    bbar: [
        '-&gt;', {
        text: 'Reset Example',
        handler: function () {
          gridStore.loadData(myData);
        }
      }
    ]
  });
  </code></pre>