extjs中的UI层分页和排序答案

【问题标题】：UI layer pagination and sorting in extjsextjs中的UI层分页和排序
【发布时间】：2016-08-25 17:24:13
【问题描述】：

我有我的 extjs 应用程序。截至目前，我正在从后端获取所有记录，完整记录集在 1 个服务请求中。我需要在 UI 级别实现分页和排序。排序似乎很简单。我如何实现 UI 级别的分页？这有什么例子吗？我得到了 10-20k 条记录，所以如果我在 UI 级别实现分页就可以了吗？ extjs6可以处理负载吗？

【问题讨论】：

标签： pagination extjs6 extjs6-classic

【解决方案1】：

我建议您处理分页服务器端。现在您可能只有有 10-20k 条记录，但如果它增长到 100k 怎么办？还是一百万？

看看来自 Sencha 的这份指南：Grids - Paging。它解释了很多。

祝你好运！

【讨论】：

我同意你的看法。但需要查看 UI 级别的分页实现。我们已确保来自服务器的记录不超过 10k。无法获得使用 ajax 实现 UI 级别分页的任何示例。如果有的话，你能分享一些例子吗？
看这里：Ext.toolbar.Paging - paging with local data;在这里：Ext.ux.data.PagingMemoryProxy.
是的，我看过那些。但是任何地方都没有实现示例，所以我觉得很难。
恐怕我没有你的例子。我想很难找到一个，因为这不是解决这个问题的推荐方法。也许实现搜索/过滤选项？我真的无法想象一个用户想要浏览数百页。

【解决方案2】：

排序是开箱即用的。这是一个基于默认 ExtJs 6.2.0 应用程序的简单分页示例。

YourAppName.view.main.List

...
    // bottom paging-bar definition. Use "tbar" for top bar, or define both.
    bbar: {
        xtype: 'pagingtoolbar',
        displayInfo: true,
        emptyMsg: 'No data to display',
        items: ['->'],
        prependButtons: true
    }
...
    items: [{
        title: 'Home',
        iconCls: 'fa-home',
        layout: 'fit',     // needed for scrolling
        scrollable: true,  // for scrollable items
        items: [{
            xtype: 'mainlist'
        }]
    }, {
...

YourAppName.store.Personnel

Ext.define('YourAppName.store.Personnel', {
    extend: 'Ext.data.Store',

    alias: 'store.banners',

    autoLoad: true, // run ajax-query right after grid rendering
    loadMask: true, // show preload image
    pageSize: 100,

    model: 'YourAppName.model.Person',

    proxy: {
        type: 'ajax',
        url: '/personnel',
        reader: {
            type: 'json',
            rootProperty: 'items',
            totalProperty: 'total'
        }
    }
});

在app/model文件夹文件Person.js中创建：

YourAppName.model.Person

Ext.define('YourAppName.model.Person', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'name', type: 'string', defaultValue: '' },
        { name: 'email', type: 'string', defaultValue: '' },
        { name: 'phone', type: 'string', defaultValue: '' }
    ]
});

根据商店定义，您的网络服务器必须能够在 URI /personnel 上使用 json 响应 HTTP GET-request，如下所示：

{
    "success": true,
    "total": 20000,
    "items": [
        { "name": "Jean Luc", "email": "jeanluc.picard@enterprise.com", "phone": "555-111-1111" },
        { "name": "Worf",     "email": "worf.moghsson@enterprise.com",  "phone": "555-222-2222" },
        { "name": "Deanna",   "email": "deanna.troi@enterprise.com",    "phone": "555-333-3333" },
        { "name": 'Data',     "email": "mr.data@enterprise.com",        "phone": "555-444-4444" }
        ...
    ]
}

【讨论】：

CUD 操作怎么样？
@Hacker 提出一个关于 ExtJs CRUD 的新问题。