Problem in using Paging toolbar with Grid Panel

[Sapan]

Hello,
I am stuck at this point since a long time. Please help me identify my error-
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.]

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

[jay@moduscreate.com]

What version of the framework are you trying to use? Also, you're posting in the wrong area of the forums!

[Sapan]

I am sorry to post in the wrong area. It would be better if you can give me the right link. My problem is same as sked by anna here. I would really appreciate if you could give me the answer to the problem.

[jay@moduscreate.com]

What version of the framework are you trying to use? Also, you're posting in the wrong area of the forums!

See the above question asked again.

[Sapan]

Sorry.
I am using ext-3.3.1

[jay@moduscreate.com]

Moved to Ext 3. help.

You should be using a remote data set with your grid panel. Look at the pagination examples!

[Sapan]

Thanks for your time. But can you describe a little more about it.

[skirtle]

You need to define a proxy on your store. Usually this will be an HttpProxy, created using the url config parameter. This proxy is used by the store to load the data. In the case of paging it will pass parameters to the proxy giving details of which page of data it wants: these parameters must be interpreted appropriately by the server responding to the requests of the proxy.

[ajanelisha]

Thanks Skirtle. that was really helpful.