エクステンションのUIレイヤーのページ番号付けとソート

Question

私はextjsアプリケーションを持っています。現時点では、バックエンドからすべてのレコードを取得しています.1つのサービス要求でフルレコードが設定されています。 UIレベルでページ分割とソートを実装する必要があります。並べ替えは簡単なようです。 UIレベルのページネーションを実装するにはどうすればよいですか？これの例は何ですか？私はUIレベルでページネーションを実装すればよいので、10〜20kレコードが得られますか？ extjs6で負荷を処理できますか？

Answer 1

ページングサーバー側を処理することをお勧めします。今すぐあなたはだけ10~20kのレコードを持っているかもしれませんが、それが100kになるとどうなりますか？または100万？

Senchaからこのガイドをご覧ください：Grids - Pagingそれはたくさん説明します。

幸運を祈る！

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

ストア定義の通りあなたのWebサーバは、このようなJSONでURI /personnel上HTTPGET-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" } 
     ... 
    ] 
}