Ext5 Ext.data.proxy.Memory客户端数据分页示例
Ext5使用Ext.data.proxy.Memory对客户端数据进行分页示例，Ext5对Ext.data.proxy.Memory进行了调整，要对客户端数据进行分页，使用Ext.data.proxy.Memory即可，配置enablePaging为true。如果版本低于Ext5，需要使用Ext.ux.data.PagingMemoryProxy这个对象（具体参考：Ext4如何对本地数据进行分页显示）。
Ext5 Ext.data.proxy.Memory客户端数据分页示例源代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext5 Ext.data.proxy.Memory客户端数据分页示例</title>
<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
</head>
<body>
<script>
/*
//不在需要和ext4-那样定义ux路径加载Ext.ux.data.PagingMemoryProxy
Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require(['Ext.ux.data.PagingMemoryProxy']); */
Ext.define('Task', { extend: 'Ext.data.Model', fields: [{ name: 'description', type: 'string'}] });
var data = [
{ description: 'Integrate 2.0 Forms with 2.0 Layouts' }, { description: 'Implement AnchorLayout' },
{ description: 'Add support for multiple types of anchors' }, { description: 'Testing and debugging' },
{ description: 'Add required rendering "hooks" to GridView' }, { description: 'Extend GridView and override rendering functions' },
{ description: 'Extend Store with grouping functionality' }
];
Ext.onReady(function () {
var store = Ext.create('Ext.data.Store', {
model: 'Task',
pageSize: 3,
autoLoad: true, //自动加载，需要配置MemoryProxy的data属性，手动经测试无法分页，不知道是不是bug
proxy: new Ext.data.MemoryProxy({ data: data, reader: { type: 'json' }, enablePaging: true })
});
//手动加载数据，如其他ajax返回的json数据，调用loadRawData方法，不能分页，会直接显示全部记录
//点击上下页会无法显示记录。。。⊙﹏⊙b汗。经测试要正常分页只能使用上面的方法。不知道怎么破。。。还是bug？。。
/*var store = Ext.create('Ext.data.Store', {
model: 'Task',
pageSize: 3,
proxy: { type: 'memory', reader: { type: 'json' }, enablePaging: true}//直接设置proxy或者使用下面动态代码设置都不行
});
//store.setProxy({ type: 'memory', reader: { type: 'json' }, enablePaging: true })
store.loadRawData(data, true);*/
var pagingToolbar = new Ext.PagingToolbar({ store: store, displayInfo: true }); //分页控件
var grid = Ext.create('Ext.grid.Panel', {
width: 500, height: 250, frame: true,
title: 'Ext5 Ext.data.proxy.Memory客户端数据分页示例',
iconCls: 'icon-grid', renderTo: document.body,
columns: [{ header: 'Task',flex:1, dataIndex: 'description'}],
store: store, bbar: pagingToolbar
});
});
</script>
</body>
</html>
相关文章
Ext如何对本地数据进行分页显示
加支付宝好友偷能量挖...
原创文章，转载请注明出处：Ext5 Ext.data.proxy.Memory客户端数据分页示例