CODEWITHSUNDEEP
javascripthtmlextjs
David
David

Reputation: 4291

Pagging is working with static but not for dynamic data

I am trying to load the grid with json data and Pagging in bottom bar.

My paging is loading but not working. With same this is working for static data.

Here is my fiddle with static data, Fiddle_Static Here is my fiddle with static data, Fiddle Dynamic Here is my code. 

var ItemsPerPage = 3;

Ext.create('Ext.data.Store', {
    storeId: 'Store',
        proxy :{
        enablePaging: true,
        type:'ajax',
        url: 'data1.json',
        reader:{
            type:'json',
            rootProperty:"root"
        }
    },
    pageSize: ItemsPerPage,
    autoLoad:true,
    fields: ['Surname','Name','RollNo']
});

Ext.create('Ext.grid.Panel', {
    title: 'Student',
    store:Ext.data.StoreManager.lookup('Store'),

    columns:
[
   { text : 'SName' , dataIndex: 'Surname' ,width : 100},
   { text : 'Name' ,  dataIndex: 'Name' ,width : 100},
   { text : 'RNum' ,  dataIndex: 'RollNo' ,width : 100}
],
    width: 340,
    height:250,
    dockedItems: [{
        xtype:'pagingtoolbar',
        store:'Store',
        dock: 'bottom',
        displayInfo:true
        }],
    renderTo: document.body
});

Can anyone please help me to fix this issue.

Upvotes: 0

Views: 289

Answers (2)

Alexander
Alexander

Reputation: 20234

Paging against an external data source requires the server to only deliver the requested records.

When the first page is loaded into the grid, the store sends to the server the request:

data1.json?page=1&start=0&limit=3

and expects the server to answer with

success:true,
total:27,
data:[{Id:0},{Id:1},{Id:2}] (<-- three items only!)

When the user wants to see page 2, the client then sends to the server the request:

data1.json?page=2&start=3&limit=3

and expects the answer

success:true,
total:27,
data:[{Id:3},{Id:4},{Id:5}] (<-- three items only!)

and so on.

Your data source right now is returning all items, although the client asked for the first three only.

To get a dynamic data source in fiddle, you have to check "Dynamic data source" at the top of data1.json, and then the header changes to:

function(params, req, Fiddle) {

Now you can fill in the function body, e.g. quick and dirty with

if(params.page==1)
return {"total":12, "root" : [{
   "Surname": "lisa",
   "Name":"King",
   "RollNo": 1
  },
  {
   "Surname": "John",
   "Name":"Lever",
   "RollNo": 2
  },
  {
   "Surname": "Lee",
   "Name":"Dev",
   "RollNo": 3
  }]};
else if(params.page == 2) 
...

How to do it in your final project depends on how your backend looks like.

Upvotes: 2

Kevin Liss
Kevin Liss

Reputation: 136

I Think that´s not working cause the sum of widthat the lines
{ text : 'SName' , dataIndex: 'Surname' ,width : 100},
isnt the same as your widht of the table width: 340,

Upvotes: -1

Related Questions