Как скрыть и показать кнопки, расположенные внутри сетки в Ext JS?

Question

У меня сетка выглядит примерно так:

Ext.create('Ext.grid.Grid', {
    title: 'myGrid',
    store: 'myStore',
    columns: [
        { text: 'Name',  dataIndex: 'name'},
        { text: 'Running', dataIndex: 'running' },
        { 
            xtype: 'actioncolumn',
            text:'play or stop',
            items:[
                {
                    iconCls: 'x-fa fa-play-circle',
                    handler:function(grid, rowIndex, colIndex){ play(); }
                }, {
                    iconCls: 'x-fa fa-stop-circle',
                    handler:function(grid, rowIndex, colIndex){ stop(); }
                }
            ]
        }
    ]
});

Работает нормально.В третьем столбце есть две кнопки: «кнопка воспроизведения» и «кнопка остановки».Теперь они всегда видны, но я хочу, чтобы кнопка воспроизведения была видна только при running==false, а кнопка останова - только при running==true.Как мне этого добиться?

Answer 1

Это сработало:

Ext.create('Ext.grid.Grid', {
    title: 'myGrid',
    store: 'myStore',
    columns: [
        {text: 'Name', dataIndex: 'name'},
        {text: 'Running', dataIndex: 'running'},
        {
            xtype: 'actioncolumn',
            text: 'play or stop',
            items: [
                {
                    getClass: function (value, metadata, record) {
                        return record.data.running ? 'x-fa fa-stop-circle' : 'x-fa fa-play-circle'; 
                    },
                    handler: function (grid, rowIndex, colIndex) {
                        playOrStop();
                    }
                },
            ]
        }
    ]
});

Answer 2

Вы можете использовать конфигурацию getClass, которая может быть указана для самого actioncolumn или для дочерних элементов actioncolumn. Документы

Тогда вы можете просто сделать что-то вроде этого:

Ext.create('Ext.grid.Grid', {
    title: 'myGrid',
    store: 'myStore',
    columns: [
        {text: 'Name', dataIndex: 'name'},
        {text: 'Running', dataIndex: 'running'},
        {
            xtype: 'actioncolumn',
            text: 'play or stop',
            items: [
                {
                    getClass: function (value, metadata, record) {
                        return record.data.running ? '' : 'x-fa fa-play-circle'; 
                    },
                    handler: function (grid, rowIndex, colIndex) {
                        play();
                    }
                }, {
                    getClass: function (value, metadata, record) {
                        return record.data.running ? 'x-fa fa-stop-circle' : '';
                    },
                    handler: function (grid, rowIndex, colIndex) {
                        stop();
                    }
                }
            ]
        }
    ]
});