Geek Answers Handbook

Extjs 4 grid paging not working

Elements on the page were set to 10, and I also created an xtype paging toolbar in the attached elements in the interface.

The oracle query has no initial and limit parameters. How do I retrieve a sample from an 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)
                               {
                               }
                           });
                         }
                    }           
       });
 });
0
source share
3 answers

You must handle server-side paging, Ext js provides only the necessary things for swapping.

for each click on the next or previous, Ext js automatically sends two parameters start and limit, where start is the next index of the last re-entry of the page and limit (itemsPerPage) is your number of entries on the page.

, , 100 , , - 10.

Intially start = 0 10, , start 11, 10.. , , 0, 10

, .

+1

, , - . .

0

. , RecsPerPage. Sql .

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

then your sql query will look 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 is all your table data

0
source

More articles:


All Articles