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

据我所知，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()
        });
    }
});

Answer 2

我不知道这是否是正确的方法来解决此问题。但这对我有用。我通过行索引和单元格索引将innerHTML设置为Grid单元格。在下面的代码this.TravelReportList中是我的ExtJS网格面板对象 rowIndex我正在参加单元格点击事件。

下面的代码行为单元格设置了“播放图标”和“付款”工具提示

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;
                                }
                            }
                        }
                    }]
                }]

如何切换ExtJs网格动作列图标和工具提示？

2 个答案: