Ext如何对本地数据进行分页显示
ext加载数据时，分页功能一般通过服务器返回需要显示的数据，返回多少显示多少，即使stroe配置了pageSize属性，而返回的数据量大于pageSize定义的，多余的数据还是会显示出来。所以按照一般的方式创建store数据源加载本地数据，会一次性显示完所有的数据，而没有分页效果（虽然页脚的分页导航出来了）。
要对客户端数据进行分页，可以使用别人已经写好的Ext.ux.data.PagingMemoryProxy扩展，已经集成到Ext中，一般下载的示例代码文件夹中都会有个ux文件夹，包含了Ext.ux.data.PagingMemoryProxy的定义。
下面为Ext对客服端数据进行分页的效果对比，分别使用Ext.data.MemoryProxy和Ext.ux.data.PagingMemoryProxy。
1）使用Ext.data.MemoryProxy，导航信息正确，但是一次显示完了所有数据
2）使用Ext.ux.data.PagingMemoryProxy，导航信息正确，显示pageSize定义的数据量，而非全部显示所有数据
源代码如下，ext版本为4.1.1a
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext对本地数据进行分页显示</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
<style>
.floatpl{background:url(/logo.jpg)}
</style>
<script type="text/javascript">
Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.data.PagingMemoryProxy',
'Ext.form.field.Number',
'Ext.form.field.Date',
'Ext.tip.QuickTipManager'
]);
Ext.define('Task', {
extend: 'Ext.data.Model',
idProperty: 'taskId',
fields: [
{name: 'projectId', type: 'int'},
{name: 'project', type: 'string'},
{name: 'taskId', type: 'int'},
{name: 'description', type: 'string'},
{name: 'estimate', type: 'float'},
{name: 'rate', type: 'float'},
{name: 'cost', type: 'float'},
{name: 'due', type: 'date', dateFormat:'m/d/Y'}
]
});
var data = [
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple types of anchors', estimate: 4, rate: 150, due:'06/27/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'}
];
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
var store = Ext.create('Ext.data.Store', {
model: 'Task',
sorters: {property: 'due', direction: 'ASC'},
groupField: 'project',
pageSize:10,
autoLoad:true,
///////////////////////////proxy的区别，测试时分别注释其中一种来查看效果
proxy:new Ext.ux.data.PagingMemoryProxy({ data:data,reader:{type:'json'}})
// proxy:new Ext.data.MemoryProxy({ data:data,reader:{type:'json'}})
});
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
var showSummary = true;
var pagingToolbar=new Ext.PagingToolbar({
store: store,
displayInfo: true
});
var grid = Ext.create('Ext.grid.Panel', {
width: 800,
height: 350,
frame: true,
title: 'Sponsored Projects',
iconCls: 'icon-grid',
renderTo: document.body,
store: store,
plugins: [cellEditing],
bbar: pagingToolbar,
selType: 'checkboxmodel',
columns: [
new Ext.grid.RowNumberer({header:'num',width:30,locked:true}),
{
header: 'Task',
width:200,
locked:true,
sortable: true,
dataIndex: 'description',
}, {
header: 'Project',
width: 180,
sortable: true,
dataIndex: 'project'
}, {
header: 'Due Date',
width: 80,
sortable: true,
dataIndex: 'due',
summaryType: 'max',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
summaryRenderer: Ext.util.Format.dateRenderer('m/d/Y'),
field: {
xtype: 'datefield'
}
}, {
header: 'Estimate',
width: 75,
sortable: true,
dataIndex: 'estimate',
summaryType: 'sum',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
return value + ' hours';
},
summaryRenderer: function(value, summaryData, dataIndex) {
return value + ' hours';
},
field: {
xtype: 'numberfield'
}
}, {
header: 'Rate',
width: 75,
sortable: true,
renderer: Ext.util.Format.usMoney,
summaryRenderer: Ext.util.Format.usMoney,
dataIndex: 'rate',
summaryType: 'average',
field: {
xtype: 'numberfield'
}
}, {
id: 'cost',
header: 'Cost',
width: 75,
sortable: false,
groupable: false,
renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
return Ext.util.Format.usMoney(record.get('estimate') * record.get('rate'));
},
dataIndex: 'cost'
}]
});
});
</script>
</head>
<body>
<div id="Div1" style="width:100%;height:200px;overflow:auto"></div>
</body>
</html>
相关文章
Ext5 Ext.data.proxy.Memory客户端数据分页示例
加支付宝好友偷能量挖...
原创文章，转载请注明出处：Ext如何对本地数据进行分页显示