modernのグリッドでページングしてみます。

Ext.grid.plugin.PagingToolbarを使ってページング用のツールバーを設置します。classicの場合はコンポーネントでしたが、modernの場合はプラグインになっています。

ストア

まずはストアですが、これはclassicと同じです(enablePaging, pageSizeを設定)。

/**
 * 商品ストアクラス。
 *
 * @class Sample.store.Item
 * @extend Ext.data.Store
 */
Ext.define(Sample.store.Item, {
    extend: Ext.data.Store,
    alias: store.item,

    requires: [
        Ext.data.proxy.Memory,
        Sample.model.Item
    ],

    model: Sample.model.Item,

    pageSize: 5,

    proxy: {
        type: memory,
        enablePaging: true
    },

    data: [
        { id: 1, name: 商品1, price: 1000, isActive: true, created: new Date() },
        { id: 2, name: 商品2, created: new Date() },
        { id: 3, name: 商品3, created: new Date() },
        { id: 4, name: 商品4, created: new Date() },
        { id: 5, name: 商品5, created: new Date() },
        { id: 6, name: 商品6, created: new Date() },
        { id: 7, name: 商品7, created: new Date() },
        { id: 8, name: 商品8, created: new Date() },
        { id: 9, name: 商品9, created: new Date() },
        { id: 10, name: 商品10, created: new Date() },
        { id: 11, name: 商品11, created: new Date() },
        { id: 12, name: 商品12, created: new Date() },
        { id: 13, name: 商品13, created: new Date() },
        { id: 14, name: 商品14, created: new Date() },
        { id: 15, name: 商品15, created: new Date() },
        { id: 16, name: 商品16, created: new Date() },
        { id: 17, name: 商品17, created: new Date() },
        { id: 18, name: 商品18, created: new Date() },
        { id: 19, name: 商品19, created: new Date() },
        { id: 20, name: 商品20, created: new Date() }
    ]

});

プラグインを組み込む

次にExt.grid.plugin.PagingToolbarを組み込みます。

/**
 * 商品一覧グリッドクラス。
 *
 * @class Sample.view.main.List
 * @extend Ext.grid.Grid
 */
Ext.define(Sample.view.main.List, {
    extend: Ext.grid.Grid,
    xtype: main_list,

    requires: [
        Ext.grid.column.Number,
        Ext.grid.column.Boolean,
        Ext.grid.column.Date,
        Ext.grid.plugin.PagingToolbar
    ],

    title: 商品一覧,

    store: Item,

    plugins: {
        type: pagingtoolbar
    },

    columns: [
        {
            dataIndex: id,
            text: ID,
            align: right
        },
        {
            dataIndex: name,
            text: 商品名,
            minWidth: 300,
            flex: 1
        },
        {
            xtype: numbercolumn,
            format:0,000円,
            dataIndex: price,
            text: 金額,
            align: right
        },
        {
            xtype: booleancolumn,
            dataIndex: isActive,
            text: 有効状況,
            trueText: 有効,
            falseText: 無効,
            align: center
        },
        {
            xtype: datecolumn,
            format: Y/m/d H:i,
            dataIndex: created,
            text: 登録日時,
            width: 180
        }
    ]
});

f:id:sham-memo:20170221160758p:plain

プラグインを組み込むと、グリッドの下部にツールバーが設置されます。指でツールバーの●をぐいっと移動してページを変更できます。

非常にあっさりとしたツールバーですが、タップ操作ならこれぐらいで十分なのでしょう。