[Ext JS Grid] 前端数据分页Grid(内存)

oscar999

于 2023-01-28 11:28:58 发布

阅读量815

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Ext JS开发大全文章标签： javascript Ext JS Memory数据 Grid

本文链接：https://blog.csdn.net/oscar999/article/details/128776383

Ext JS开发大全专栏收录该内容

190 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

这篇博客探讨了在Ext JS中如何处理前端数据分页的问题，特别是使用内存数据时。作者首先指出了直接使用内存数据导致的分页问题，然后介绍了Ext.ux.data.PagingMemoryProxy和Ext.data.proxy.Memory的使用，展示了正确实现分页的方法。当数据动态添加或修改时，发现常规方法无法更新分页工具栏，解决方案是在添加数据后重新设置Grid的Store。结论强调在动态数据场景下，必须使用setStore来保持分页工具栏的正确显示。

在后端数据接口中，根据page、start和limit 这三个参数，返回对应页数的数据。
完整的参见： [Ext JS Grid] 后端数据分页Store Grid

但是如果使用的是memory等类型的前端数据时，数据是一开始就全部初始化好了的，分页要怎样处理呢？

前端数据（内存）的Grid 分页 - 非正确使用

构造数组：

            var users = [];
            for (var i = 0; i < 102; i++) {
                users.push({ name: 'user' + (i+1) });
            }

Grid定义如下：

            Ext.create('Ext.panel.Panel', {
                title: '前端内存分页-非正确使用',
                items: {
                    xtype: 'grid',
                    height: 400,
                    columns: [{
                        text: '姓名',
                        dataIndex: 'name'

了解本专栏