paging in extjs 4 grid is not working

Question

Items per page has been set to 10 and also I have created paging toolbar as xtype in docked items in the front end.

There's no start and limit parameters in oracle query. How do I go about fetching the records from oracle database

Please help!

Here is my code:

 Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'ux/');

Ext.require(['*']);

 Ext.onReady(function()
 {
     var itemsPerPage = 10;
     var store=Ext.create('Ext.data.Store',
       {
           autoload: true,
           autosync: true,
           pageSize: itemsPerPage,
           data: [],
           fields:
                   [
                        {name: 'firstname', id:'firstname'},
                        {name: 'email', id:'email'},
                        {name: 'mobileno', id:'mobileno'}
                   ]
       });  

     var panel = Ext.create('Ext.grid.Panel',
       {
            layout: 'fit',
            store:store,
            id: 'grid1',
            dockedItems:
                    [
                        {
                            xtype: 'pagingtoolbar',
                            store:store,
                            dock:'bottom',
                            displayInfo:true
                        }
                    ],
            renderTo: Ext.getBody(),
                        columns:
                    [
                        {
                            header:'Firstname',
                            id:'firstname',
                            dataIndex:'firstname',
                            //autoSizeColumn : true,
                            flex: 1, 
                            editor: {
                                        xtype: 'textarea'
                                    }
                        },
                        {
                            header:'Action',
                            id:'action',
                            align:'center',
                            xtype:'actioncolumn',
                            autoSizeColumn : true,
                            //flex: 1, 
                            sortable:false,

                            items:
                                    [
                                        {
                                            icon:'images/view_icon.gif',
                                            tooltip:'View',
                                            handler: function(grid,rowIndex,colIndex)
                                            {
                                                var rec= grid.getStore().getAt(rowIndex);
                                                var email=rec.get('email');
                                                location.href="RegistrationFormGridView.jsp?email="+email;
                                            }
                                        },
                                        {
                                            icon:'images/edit_icon.gif',
                                            tooltip:'Edit',
                                            handler: function(grid,rowIndex,colIndex,e)
                                            {
                                                var rec= grid.getStore().getAt(rowIndex);
                                                var email = rec.get('email');
                                                location.href="GetRecords.jsp?email="+email; 
//                                                alert(JSON.stringify(rec.get('email')));
//                                                window.location='GetFormData?key1='+email;                                               
                                            }
                                        },
                                        {
                                            icon:'images/icons/cancel.png',
                                            tooltip:'Delete',
                                            handler: function(grid,rowIndex,colIndex)
                                            {   
                                                var rec= grid.getStore().getAt(rowIndex);
                                                var email = rec.get('email');
                                                Ext.Ajax.request(
                                                {
                                                    url:'./deleteRecords',
                                                    params:{email:email},
                                                    method:'GET',

                                                    success: function(response)
                                                    {
                                                        Ext.Msg.alert("successfully deleted" +" " + response.status);
                                                        window.location.reload();
                                                    },
                                                    failure: function(response)
                                                    {
                                                        Ext.Msg.alert("failed" + response.status);
                                                    }
                                                });
                                            }
                                        }
                                    ]
                        }
                    ],

                   listeners: 
                    {
                        afterrender:function()
                         {
                             Ext.Ajax.request(
                           {
                               params:{email:email},
                               url:'./RetrieveRecords',
                               success: function(response)
                               {  
                                   data = [];
                                   data = Ext.JSON.decode(response.responseText);
                                   Ext.getCmp('grid1').getStore().loadData(data);
                               },
                               failure: function(response)
                               {
                               }
                           });
                         }
                    }           
       });
 });

possible duplicate of [Paging with Oracle](http://stackoverflow.com/questions/241622/paging-with-oracle) — Evan Trimboli, Dec 16 '14 at 10:45

score 1 · Answer 1 · answered Dec 16 '14 at 09:37

1

You have to handle paging at server side, Ext js only provides you the neccsary things you need for paging.

for every click on next or previous ,Ext js automatically sends two parameters start and limit where start is the next index of last reocord of the page and limit(itemsPerPage) is your number of records per page.

for example Assume you have 100 records and you have implemented paging in the grid and items per page is 10.

Intially start =0 and limit will be 10 ,If you click next and start will be 11 and limit will be 10 .. similaryly if you click previous start will be 0 and limit will be 10

Using these two parameters you have to frame your query for loading records and send the records as response .

answered Dec 16 '14 at 09:37

Surya Prakash Tumma

2,153
4
27
47

You mean I have to customize the database query in servlet? If so can you please provide any clue or hint in doing the same – kittu Dec 16 '14 at 09:42
Yes exactly .. select * from tablename where start=startParameter and limt by itemsPerpage.. Please excuse me for the sql syntax... and when you are implementing paging you wont get all the data to grid at once depends on user choice you will hit the servlet – Surya Prakash Tumma Dec 16 '14 at 09:46
There's no start and limit parameters in oracle query. How do I go about fetching the records :( – kittu Dec 16 '14 at 10:41
I have mentioned already I am poor in sql for understanding purpose I have used start and limit... you have look in oracle how to fetch records starting from row number (start) and how many records(limit) – Surya Prakash Tumma Dec 16 '14 at 10:55
@SuryaPrakashTumma: We will also need 'total' apart from start and limit. – Anand Gupta Dec 17 '14 at 12:04

score 0 · Answer 2 · answered Dec 29 '14 at 08:26

0

What you can also do is to fetch all the records from the database and put it in array. After that on array you can set the start and end point to fetch the records.

answered Dec 29 '14 at 08:26

Ravi SONI

1

score 0 · Answer 3 · answered Mar 23 '17 at 06:06

You have to handle paging at server side,What you can do is send two parameters Page and RecsPerPage .Then on Sql server you can Set First record and last record on the basis of these two parameters.

@FirstRec = (@Page - 1) * @RecsPerPage ); @LastRec = (@Page * @RecsPerPage + 1);

then your sql query will be like=

select top (@LastRec -1)* from

(select cast(ROW_NUMBER() OVER(ORDER BY ID) as numeric)

ROWID, * from TempResult
    WHERE ROWID > @FirstRec   AND ROWID < @LastRec     
    order by temp.ID desc                                 
    ) temp

TempResult will be your whole Table data

paging in extjs 4 grid is not working

3 Answers3

Linked