代码之家 › 专栏 › 技术社区 › Vikas Hire

如何切换ExtJS网格操作列图标和工具提示?

extjs jquery javascript

Vikas Hire · 技术社区 · 6 年前

我需要切换操作列图标和工具提示。我有两张图像可以播放和暂停 (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
                }
            }]
        },

2 回复 | 直到 6 年前

Coderino Javarino 6 年前

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

Vikas Hire 6 年前

我不知道这是不是解决这个问题的正确方法。但这对我很有效。我正在将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;
                                }
                            }
                        }
                    }]
                }]