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

今回もExtJS6.5のmodernグリッド改善点です。

グリッドの各所にアイコンボタンを設置できるようになった！

スマフォやタブレットでお馴染みのアイコンのボタンを、グリッドの色々な箇所に設置できるようになりました。

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

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

    controller: 'main',
    viewModel: 'main',

    layout: 'fit',

    items: {
        xtype: 'grid',

        store: {
            proxy: 'memory',
            data: [
                { id: 1, state: '鹿児島県', name: 'yamada1', tel: '09011111111' },
                { id: 2, state: '鹿児島県', name: 'yamada2', tel: '09022222222' },
                { id: 3, state: '鹿児島県', name: 'yamada3', tel: '09033333333' },
                { id: 4, state: '鹿児島県', name: 'yamada4', tel: '09044444444' },
                { id: 5, state: '鹿児島県', name: 'yamada5', tel: '09055555555' },
                { id: 6, state: '鹿児島県', name: 'yamada6', tel: '09066666666' },
                { id: 7, state: '鹿児島県', name: 'yamada7', tel: '09077777777' },
                { id: 8, state: '鹿児島県', name: 'yamada8', tel: '09088888888' },
                { id: 9, state: '鹿児島県', name: 'yamada9', tel: '09099999999' }
            ],

            grouper: {
                property: 'state'
            }
        },

        platformConfig: {
            desktop: {
                plugins: {
                    gridcellediting: true
                }
            },

            '!desktop': {
                plugins: {
                    grideditable: true
                }
            }
        },

        grouped: true,

        groupHeader: {
            tpl: 'Group: {name}',

            tools: {
                print: {
                    tooltip: 'Print group',
                    zone: 'tail'
                },

                save: {

                },

                refresh: {

                }
            }
        },

        columns: [
            {
                dataIndex: 'id',
                text: 'ID',
                align: 'right'
            },
            {
                dataIndex: 'name',
                text: '氏名',
                minWidth: 150,
                flex: 1,
                editable: true,

                tools: {
                    gear: {
                        zone: 'end',
                        handler: function (column, tool, e) {
                            // columnは列への参照。
                            // toolはアイコンボタンへの参照(Ext.Toolクラスのインスタンス)
                            // eはイベントオブジェクト。
                        }
                    }
                },

                cell: {
                    tools: {
                        gear: {
                            zone: 'end',
                            handler: function (grid, config) {
                                // gridはグリッドへの参照。
                                // configには、cell・column・event・grid・record・toolのプロパティが存在
                            }
                        }
                    }
                }
            },
            {
                dataIndex: 'tel',
                text: '電話番号',
                width: 200,
                editor: 'textfield'
            }
        ]
    }
});

上記のように、toolsプロパティを指定すると、これまで設置が大変だったカラムやグループの部分にもボタンを設置できます。

gearやprintのプロパティ名がアイコンの種類になるようです。Developer Toolで直接参照したところ、該当アイコンのclass属性は「x-icon-el x-font-icon x-tool-type-print」となっていたので(printの場合)、おそらくMaterial Iconsに存在するアイコンが指定できるのだと思われます。ext/modern/theme-neptune/sass/src/Tool.scssにアイコンの定義があったので、そこに存在する分は指定できそうです。無ければ同じように追加できる気がします。

あと、ツリー形式のグリッドでも対応してるみたいです(本投稿では省略します)。

カラムメニューが使える！

classicのようなカラムのメニューが実装されました。

ソート順やカラムの表示・非表示を切り替える、classicでは定番のUIですね。

さらに、メニューの項目も簡単に追加カスタマイズできるようです。

columns: [
    {
        dataIndex: 'id',
        text: 'ID',
        align: 'right',

        menu: {
            custom: {
                text: 'Custom Item',
                separator: true,
                handler: 'onCustom'
            }
        }
    },
・・・