UI層分頁和extjs排序

我有我的extjs應用程序。截至目前，我正在從後端獲取所有記錄，在1個服務請求中記錄了全部記錄。我需要在UI級別實現分頁和排序。排序似乎很簡單。我如何實現UI級分頁？任何這樣的例子？我得到10-20k記錄，所以如果我在UI級別實現分頁，那很好嗎？可以extjs6處理負載？UI層分頁和extjs排序

來源

2016-08-25 Hacker

我建議你處理分頁服務器端。現在你可能只有有10-20K記錄，但如果它增長到100K呢？或100萬？

看看Sencha的這本指南：Grids - Paging。它解釋了很多。

祝你好運！

來源

2016-08-29 13:37:34

我同意你。但需要看到UI級別分頁實施。我們確保不會有超過10K的記錄會來自服務器。無法獲得使用ajax實現UI級別分頁的任何示例。你可以分享一些例子，如果有的話。 – Hacker

看看這裏：[Ext.toolbar.Paging - 使用本地數據分頁]（http://docs.sencha.com/extjs/6.2.0-classic/Ext.toolbar.Paging.html#ext-toolbar-paging_paging -with本地數據）;和這裏：[Ext.ux.data.PagingMemoryProxy]（http://docs.sencha.com/extjs/6.2.0-classic/Ext.ux.data.PagingMemoryProxy.html）。 –

是的，我見過這些。但是實現的例子並不在任何地方，所以我發現它很困難。 – Hacker

排序開箱即用。這是基於默認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 。人員

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: '' } 
    ] 
});

由於商店定義你的web服務器必須能夠響應有關HTTPGET-request對URI /personnel像這樣JSON：

{ 
    "success": true, 
    "total": 20000, 
    "items": [ 
     { "name": "Jean Luc", "email": "[email protected]", "phone": "555-111-1111" }, 
     { "name": "Worf",  "email": "[email protected]", "phone": "555-222-2222" }, 
     { "name": "Deanna", "email": "[email protected]", "phone": "555-333-3333" }, 
     { "name": 'Data',  "email": "[email protected]",  "phone": "555-444-4444" } 
     ... 
    ] 
}

來源

2016-09-20 10:31:51

CUD操作如何？ – Hacker

@黑客問一個關於ExtJs CRUD的新問題。 –

UI層分頁和extjs排序

回答

相關問題