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

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客户端数据分页示例
评论(1)Web开发网
阅读(983)喜欢(0)不喜欢(0)extjs