分页在extjs 4网格不工作 [英] paging in extjs 4 grid is not working
问题描述
每页的项目已设置为10，并且我已经在前端的停靠项目中创建了分页工具栏作为xtype。
Items per page has been set to 10 and also I have created paging toolbar as xtype in docked items in the front end.
没有开始和限制参数oracle查询如何从oracle数据库中获取记录
There's no start and limit parameters in oracle query. How do I go about fetching the records from oracle database
请帮助！
这是我的代码： / p>
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)
{
}
});
}
}
});
});
推荐答案
您必须在服务器端处理分页，Ext js只需为您提供分页所需的必要条件。
You have to handle paging at server side, Ext js only provides you the neccsary things you need for paging.
对于下一个或上一次的每次点击，Ext js会自动发送两个参数start和limit，其中start是下一个index页面的最后一个记录和限制（itemsPerPage）是您每页的记录数。
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.
例如假设您有100条记录，并且已经在网格和项目中实现了分页每页是10。
for example Assume you have 100 records and you have implemented paging in the grid and items per page is 10.
初始启动= 0，限制为10，如果您点击下一步，开始将为11，限制将为10 ..如果您点击以前的开始将为0，并且限制将为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 .
这篇关于分页在extjs 4网格不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
