(ExtJS6.5)グリッドの新機能[modern] (3)

今回もグリッドについてです。細かいところばかりなので、前回書いとけば良かったです。

Virtual Stores

Ext.data.virtual.Storeというクラスが追加されたようです。

BufferedStoreと同じようなクラスであるとの記述があります。

管理するデータセットのうち必要なレコードおよびその前後のレコードをロード・保持できるようです。

たしかにBufferedStoreと同じような気がしますが、残念ながら私自身は具体的な利用箇所をイメージできていません。

いくつか違いがあるようですが、そのうち「複数のビューで共有可能」という点があるので、VirtualStoreのほうが応用効くのかな。(そもそもBufferedStoreが共有できないことを知らなかったですが)

もう少し情報を仕入れてから判断したいところです。

選択用クラス名が変わってる

名前変わっただけじゃなくて、いくつか機能も追加されているようです。

Ext.grid.plugin.MultiSelection -> Ext.grid.plugin.RowOperations

グルーピング

グリッドのgroupHeaderコンフィグでテンプレートなどを指定するようになりました。

前回しれっとグルーピングしているので、具体的なコードはそちらで確認できます。

http://sham-memo.hatenablog.com/entry/2017/06/02/200247

グリッドのサマリー

Ext.grid.SummaryRowを使いますが、groupFooterかpinnedFooterコンフィグに指定するようになりました。

年齢を追加して、平均年齢を表示させてみました。

Ext.define('Sample.view.main.Main', {
    extend: 'Ext.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.layout.Fit'
    ],

    layout: 'fit',

    title: 'ユーザ一覧',

    items: {
        xtype: 'grid',

        store: {
            proxy: 'memory',

            fields: [
                'id',
                'state',
                'name',
                'tel',
                {
                    name: 'age',
                    summary: 'average'
                }
            ],

            data: [
                { id: 1, state: '鹿児島県', name: 'yamada1', tel: '09011111111', age: 35 },
                { id: 2, state: '鹿児島県', name: 'yamada2', tel: '09022222222', age: 28 },
                { id: 3, state: '鹿児島県', name: 'yamada3', tel: '09033333333', age: 24 },
                { id: 4, state: '鹿児島県', name: 'yamada4', tel: '09044444444', age: 20 },
                { id: 5, state: '熊本県', name: 'yamada5', tel: '09055555555', age: 62 },
                { id: 6, state: '熊本県', name: 'yamada6', tel: '09066666666', age: 61 },
                { id: 7, state: '熊本県', name: 'yamada7', tel: '09077777777', age: 40 },
                { id: 8, state: '熊本県', name: 'yamada8', tel: '09088888888', age: 38 },
                { id: 9, state: '熊本県', name: 'yamada9', tel: '09099999999', age: 32 }
            ],

            grouper: {
                property: 'state'
            }
        },

        grouped: true,

        groupHeader: {
            tpl: 'Group: {name} ({count})'
        },

        groupFooter: {
            xtype: 'gridsummaryrow',
            cls: 'user-summaryrow'
        },

        columns: [
            {
                dataIndex: 'id',
                text: 'ID',
                align: 'right'
            },
            {
                dataIndex: 'name',
                text: '氏名',
                minWidth: 150,
                flex: 1
            },
            {
                dataIndex: 'tel',
                text: '電話番号',
                width: 200
            },
            {
                dataIndex: 'age',
                text: '年齢',
                width: 150,
                align: 'right',
                summaryCell: 'numbercell'
            }
        ]
    }
});

pinnedFooterコンフィグを使う場合は、pinFooters: trueも併せて指定します。pinnedFooterを使うと、フッター部分をピン留めするようにグリッドのスクロール時にサマリー行が下部に留まってくれるようです。

あと、試しにサマリー行の背景色を変えようとして気づいたことがあります。

scssファイルの配置場所がjsファイルと同じところになってるようです。Main.jsと同じディレクトリにMain.scssを作成したら確かに反映されました。ExtJS7でもこれでいくのかな。

レーティング

Ext.ux.rating.Pickerで5段階のレーティングを表現できます。標準装備に加わりました。

他にもあるようですが、グリッドは以上で。次はリストを見てみるつもりです。