extjs 4网格中的分页不起作用

Question

每页项目数已设置为10，并且我已经在前端的停靠项目中将页面工具栏创建为xtype。

oracle查询中没有start和limit参数。 我该如何从Oracle数据库中获取记录

请帮忙！

这是我的代码：

 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)
                               {
                               }
                           });
                         }
                    }           
       });
 });

Answer 1

您必须在服务器端处理分页，Ext js仅为您提供分页所需的必要东西。

对于下一次或上一次的每次单击，Ext js自动发送两个参数start和limit，其中start是页面上一次记录的下一个索引，limit（itemsPerPage）是每页的记录数。

例如，假设您有100条记录，并且已在网格中实现分页，则每页的项目为10。

初始起始为= 0，限制为10，如果单击下一步，起始将为11，限制为10 ..同样，如果单击上一个起始，则为0，限制为10

使用这两个参数，您必须对查询进行构架以加载记录并将记录作为响应发送。

Answer 2

您还可以做的是从数据库中获取所有记录，并将其放入数组中。 之后，您可以在数组上设置起点和终点以获取记录。

Answer 3

您必须在服务器端处理分页，您可以做的是发送两个参数Page和RecsPerPage。然后在Sql Server上，您可以根据这两个参数设置First record和last record。

@FirstRec =（@Page-1）* @RecsPerPage）; @LastRec =（@Page * @RecsPerPage +1）;

那么您的SQL查询将像=

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将是您整个表的数据