ExtJS Grid Panel using Paging Toolbar

Question

I am trying to make ext JS grid panel using Paging Toolbar but not able to figure out where the problem is coming. Can anyone help me out in this-

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, 
            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    : [
              '->', 
              {
                text    : 'Reset Example',
                handler : function() {
                  gridStore.loadData(myData);
                }
              }
            ]
          });

Unos Unos · Accepted Answer · 2011-06-07T09:58:29

In the displayPanel's bbar, handler is calling loadData, on the gridStore variable which is not defined in the code snippet you've posted.

I guess you need to call loadData on the store variable declared here:

var store = new Ext.data.Store

You could also call grid.getStore().loadData();

ExtJS Grid Panel using Paging Toolbar

1 Answers