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客户端数据分页示例