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属性を付けて、非表示にしている。