グリッドの機能：サマリー[modern]

今回はグリッドのサマリー機能です。classicと同じように、グリッドの列の平均や合計を表示する行を追加できます。

サマリー表示にはExt.grid.plugin.SummaryRowプラグインクラスを使います。残念ながらドキュメントが全く整備されていませんでした(http://docs.sencha.com/extjs/6.2.1/modern/Ext.grid.plugin.SummaryRow.html)。classicと同じだからドキュメント整備を後回しにしたのかな？

ストアとモデル

以前使ったものを流用しました。

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

    fields: [
        {
            // ID
            name: 'id',
            type: 'int'
        },
        {
            // 商品名
            name: 'name',
            type: 'string'
        },
        {
            // 会社
            name: 'company',
            type: 'string'
        },
        {
            // 金額(単価)
            name: 'price',
            type: 'int'
        },
        {
            // 数量
            name: 'num',
            type: 'int'
        },
        {
            // 売上金額
            name: 'total',
            convert: function (value, record) {
                return record.get('price') * record.get('num');
            },
            depends: [
                'price',
                'num'
            ]
        },
        {
            // 作成日時(注文日時)
            name: 'created',
            type: 'date',
            dateFormat: 'Y/m/d H:i:s'
        }
    ]

});

/**
 * 注文ストアクラス。
 *
 * @class Sample.store.Order
 * @extend Ext.data.Store
 */
Ext.define('Sample.store.Order', {
    extend: 'Ext.data.Store',
    alias: 'store.order',

    requires: [
        'Ext.data.proxy.LocalStorage',
        'Sample.model.Order'
    ],

    model: 'Sample.model.Order',

    proxy: {
        type: 'localstorage',
        id: 'order'
    }

});

ビュー

グリッドにプラグインを組み込みます。

/**
 * 注文一覧グリッドクラス。
 *
 * @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.plugin.SummaryRow'
    ],

    cls: 'main-list',

    title: '注文一覧',

    store: {
        type: 'order',
        autoLoad: true
    },

    plugins: {
        type: 'summaryrow'
    },

    columns: [
        {
            dataIndex: 'name',
            text: '商品名',
            minWidth: 300,
            flex: 1
        },
        {
            xtype: 'numbercolumn',
            format: '0,000円',
            dataIndex: 'total',
            text: '売上金額',
            align: 'right',
            width: 300,
            summaryType: 'sum',
            summaryRenderer: function (value) {
                return '合計金額:' + Ext.util.Format.currency(value, '円', 0, true);
            }
        }
    ]
});

サマリー行のスタイルが何もしてない状態だったので、少し整えました。

@charset "UTF-8";

.main-list {
  .x-summaryrow {
    background-color: #eee;

    .x-summarycell {
      padding: 0.875em 1em;
    }
  }
}

classicと同じように、summaryTypeとsummaryRendererを使います。

summaryTypeにはcount、sum、min、max、averageが設定できます。

プラグインのdockedコンフィグで行の位置を変えれます。

plugins: {
    type: 'summaryrow',
    docked: 'top'
}

グリッドの機能紹介は今回で終わりです。