Ext.grid.column.Actionの表示/非表示を制御する。

Ext.grid.column.Actionはグリッド上のセルにボタン(アイコン)などを配置して、ユーザーのクリック操作に対応して何らかの処理を行うためのもの。

使うにはgridpanelのcolumnsとかにxtype:'actioncolumn'として記述する。

Ext.define 'example.Grid', {
    alias: 'widget.examplegrid'
    store: 'Examples'
    columns:[
        {
            dataIndex: 'id'
            header: 'id'
            width: 90
        }
        {
            xtype: 'actioncolumn'
            items: ['-',{
                icon: '/assets/pencil.png'
                action: 'edit'
                tooltip: 'edit'
                handler: ->
                    someAction()
            },'-'
            ],
            width: 90
        }
        {
            dataIndex: 'name'
            header: 'name'
            flex:1
        }
        {
            dataIndex: 'updated_at'
            header: 'updated at'
            width: 135
            renderer: example.Format.dateRenderer()
        }
        {
            dataIndex: 'created_at'
            header: 'created at'
            width: 135
            renderer: example.Format.dateRenderer()
        }
    ]
}

itemsの中の'-'はスペーサー。上記の場合は中央に編集ボタンが配置される。 クリックされた時の動作はhandlerに書く。 handlerにはfireEventする動作だけ書いておいて、Controllerで実際の処理を書く事になるとおもう。

自分の場合は下記のような拡張を作成して、クリックされたときにグリッド(まはたTree)のイベントとしてactionbuttonclickを発火するようにしている。(アプリ全体で同様の動作を行いたい場合は、extendじゃなくて、overrideでもいい)

Ext.define 'example.ActionColumn', {
    extend: 'Ext.grid.column.Action'
    alias: 'widget.xactioncolumn'

    header:'action'
    width: 90
    sortable: false
    menuDisabled: true              
    handler: (grid, rowIndex, colIndex, item, e, record, row)->
        (@up('grid') or @up('treepanel')).fireEvent "actionbuttonclick", item.action, grid, rowIndex, colIndex, item, e, record, row
}

この例の場合、編集ボタンは常に表示されるが、場合によってはある行だけ非表示にしたいという事がある。ログインしたユーザーが編集する権限を持っていない場合は非表示にしておきたいとか。

その場合は、アイコンの設定にgetClassメソッドを加えて、この返す値で表示/非表示を切り替えればよい。

Ext.define 'example.Grid', {
    ........(中略)........
        {
            xtype: 'actioncolumn'
            items: ['-',{
                icon: '/assets/pencil.png'
                action: 'edit'
                tooltip: 'edit'
                handler: ->
                    someAction()
                getClass: (self, meta, record, rowIndex, colIndex, store, view)->
                    'x-hide-display' if record.get('readonly') is true
            },'-'
            ],
            width: 90
        }
    ........(以下略)........

上記では、各行のモデルのreadonlyという属性がtrueの場合は編集ボタンにx-hide-displayのclass属性を付けて、非表示にしている。