初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

グリッドの機能:ページング[classic]

Ext.toolbar.Pagingを使って、グリッドをページング対応してみます。

まずは普通のグリッドを作成

↓のようなモデルとストアを作成しました。(今はストアにautoLoad: trueを設定してます)

/**
 * 商品モデルクラス。
 *
 * @class Sample.model.Item
 * @extend Ext.data.Model
 */
Ext.define('Sample.model.Item', {
    extend: 'Ext.data.Model',

    fields: [
        {
            name: 'id',
            type: 'int'
        },
        {
            name: 'name',
            type: 'string'
        },
        {
            name: 'created',
            type: 'date'
        }
    ]
});

/**
 * 商品ストアクラス。
 *
 * @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',

    proxy: {
        type: 'memory'
    },

    data: [
        { id: 1, name: '商品1', 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() }
    ]
});

グリッドは↓です。

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

    title: '商品一覧',

    store: 'Item',

    columns: [
        {
            dataIndex: 'id',
            text: 'ID',
            align: 'right',
            width: 100
        },
        {
            dataIndex: 'name',
            text: '商品名',
            flex: 1
        }
    ]
});

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

結果は↑のようになりました。トリミングしていますが、商品20まで表示されています。

ページングツールバー(Ext.toolbar.Paging)を設置する

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

    requires: [
        'Ext.toolbar.Paging'
    ],

    title: '商品一覧',

    store: 'Item',

    columns: [
        {
            dataIndex: 'id',
            text: 'ID',
            align: 'right',
            width: 100
        },
        {
            dataIndex: 'name',
            text: '商品名',
            flex: 1
        }
    ],

    dockedItems: [
        {
            dock: 'bottom',
            xtype: 'pagingtoolbar',
            store: 'Item'
        }
    ]

});

dockedItemsコンフィグにページングツールバーを設置しています。

dockedItemsコンフィグは、パネルの一番外側(上下左右)にビューを設置したいときに使います。今回の場合、dock: 'bottom'として下に設置しました。

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

プロキシに合わせて対応する

ページングツールバーは設置できましたが、このままでは不十分です。

ストアのプロキシに応じて、もう少し対応が必要になります。

今回はExt.data.proxy.Memoryを使っているので、ストアクラスを変更します。

/**
 * 商品ストアクラス。
 *
 * @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', 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() }
    ]
});

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

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

ツールバーの次のページボタンを押すと、期待通りに動作することがわかります。

コードは、pageSizeとenablePagingを追加しました。

pageSizeは1ページに何件表示させるかを設定します。デフォルト値は25です。

enablePagingですが、これはExt.data.proxy.Memory独自のコンフィグです。Ext.data.proxy.Memoryは、あらかじめページングに対応した処理が実装されています。enablePagingをtrueにすることで、それを有効にできるのです。

サーバからデータを取得する場合は別のプロキシを使うことになりますが、ページング用の処理(表示すべきデータに絞るところ)はサーバ側で対応する必要があります。その際、ストアからのリクエストパラメータにstart,limit,pageというページング用の3つのパラメータが付与されているので、その値を使ってレスポンスを調整します。

なお、何度か使ってきたローカルストレージのプロキシは、ページングに対応していないので、自分で拡張する必要があります。