Как переключить значок столбца действий сетки ExtJs и всплывающую подсказку?

Question

Мне нужно переключить значки столбцов действий и всплывающую подсказку. У меня есть 2 изображения для воспроизведения и паузы (play-icon.png и pause-icon.png) Я хочу переключить его. Здесь я положил кусок кода. Любая идея сделать это?

columns: [{
            xtype: 'actioncolumn',
            flex: 0.4,
            text: 'play',
            sortable: false,
            menuDisabled: true,
            align: 'center',
            items: [{
                icon: FLEET_SERVER_URL + 'images/play-icon.png',
                tooltip: 'Play',
                scope: this,
                handler: function(grid, rowIndex, colIndex) {
                    //here I want to toggle the icons
                }
            }]
        },

Answer 1

Я не знаю, это правильный путь или нет, чтобы исправить эту проблему. Но это работает для меня. Я устанавливаю innerHTML для ячейки сетки по индексу строк и индексу ячеек. В приведенном ниже коде this.TravelReportList мой объект панели сетки ExtJS rowIndex Я получаю событие нажатия на ячейку.

ниже строки кода, устанавливающего значок воспроизведения и всплывающую подсказку «Paly» для ячейки

this.TravelReportList.getView().getNode(rowIndex).cells[1].innerHTML = '<div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-action-col" style="text-align:center;"><img role="button" alt="" src="http://192.168.1.100:8088/arabitra/public/fleet/images/play-icon.png" class="x-action-col-icon x-action-col-0" data-qtip="Play"></div>';

ниже строки кода, устанавливающего значок паузы и подсказку «Пауза» для ячейки

this.TravelReportList.getView().getNode(rowIndex).cells[1].innerHTML = '<div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-action-col" style="text-align:center;"><img role="button" alt="" src="http://192.168.1.100:8088/arabitra/public/fleet/images/pause-icon.png" class="x-action-col-icon x-action-col-0" data-qtip="Pause"></div>';

Мой окончательный код ниже

columns: [{
                    xtype: 'actioncolumn',
                    flex: 0.4,
                    text: 'play',
                    sortable: false,
                    menuDisabled: true,
                    align: 'center',
                    items: [{
                        icon: FLEET_SERVER_URL + 'images/play-icon.png',
                        tooltip: 'Play',
                        scope: this,
                        handler: function (grid, rowIndex, colIndex) {

                            if (this.tripPlayConf.rowIndex == rowIndex) {
                                if (this.pause == false) {
                                    this.TravelReportList.getView().getNode(rowIndex).cells[1].innerHTML = '<div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-action-col" style="text-align:center;"><img role="button" alt="" src="http://192.168.1.100:8088/arabitra/public/fleet/images/play-icon.png" class="x-action-col-icon x-action-col-0" data-qtip="Play"></div>';
                                    this.pause = true;
                                }
                                else {
                                    this.TravelReportList.getView().getNode(rowIndex).cells[1].innerHTML = '<div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-action-col" style="text-align:center;"><img role="button" alt="" src="http://192.168.1.100:8088/arabitra/public/fleet/images/pause-icon.png" class="x-action-col-icon x-action-col-0" data-qtip="Pause"></div>';
                                    this.pause = false;
                                }
                            }
                        }
                    }]
                }]

Answer 2

Насколько я знаю, actioncolumn не гибок для изменения своего поведения для каждой строки. Подходящим обходным решением в этом случае может быть использование widgetcolumn с button в качестве виджета. rowViewModel позволяет указать модель представления, которая создается для каждой отдельной строки и имеет доступ к этой записи строк ('{record}'); Вы можете привязать его свойства из виджета. Для доступа к записи из обработчика вы можете использовать метод getWidgetRecord(), созданный для виджета (независимо от его xtype). Вот (классический) пример скрипки

Ext.define('MyView', {
    viewModel: {
        stores: {
            gridStore: {
                fields: ['name', 'isPlaying'],
                data: [{
                    name: 'FOO',
                    isPlaying: false
                }, {
                    name: 'BAR',
                    isPlaying: true
                }]
            }
        }
    },

    extend: 'Ext.grid.Panel',
    xtype: 'MyView',
    bind: {
        store: '{gridStore}'
    },
    columns:[{
        dataIndex: 'name',
        flex: 1
    }, {
        xtype: 'widgetcolumn',
        width: 50,
        widget: {
            xtype: 'button',
            bind: {
                iconCls: '{playButtonIcon}',
                tooltip: '{playButtonTooltip}'
            },
            handler: function(button) {
                var rec = this.getWidgetRecord();
                rec.set('isPlaying', !rec.get('isPlaying'));
            }
        }
    }],
    rowViewModel: {
        formulas: {
            playButtonIcon: function(get) {
                return get('record.isPlaying')? "x-fa fa-pause" : "x-fa fa-play";
            },
            playButtonTooltip: function(get) {
                return get('record.isPlaying')? "playing" : "paused";
            }
        }
    }
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create({
            xtype: 'MyView',
            width: 300,
            height: 300,
            renderTo: Ext.getBody()
        });
    }
});