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

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

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

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

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

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

レーティング

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

 

 

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