如何仅在操作列图像而不是网格单元格上调用操作

Question

在网格 'actioncolumn' 中，我使用 'renderer' 显示了一张图片，

图片+文字

在操作栏点击我正在调用一些操作，

但即使点击网格单元格中的空白 space 也会触发点击事件。如何防止点击空 space.

如何识别点击 link（图片+文字），而不是点击空的网格单元格 space。

{
          xtype: 'actioncolumn',
          width: '17%',      
          text: 'Display Option',
          renderer: function (value, metadata, record) {
          var label = '';
            if (record.get('status') == 0) {
                     lable = 'Show';
                     etadata.style += 'margin-top:10px;cursor:pointer;';
                     return '<span style="font-size: 14px; color:#3b87de; font-family:arial; margin-left:-3px;">' + '<img src="resources/images/show_msg.png"/>' + label + '</span>'
              } else {
                metadata.style += 'margin-top:10px;cursor:pointer;';
                 lable = 'Hide';
                   return '<span style="font-size: 14px; color:#3b87de; font-family:arial;">' + '<img src="resources/images/hide_fault.png"/>' + label + '</span>'
                            }                              

                                },
                                handler:function(grid, rowIndex, columnIndex, e){
console.log('handler test');//not triggering
                                },
                                listeners: {

                                    click: function ( grid, rowIndex, colIndex) {
console.log('handler test');// triggering
                    }
}

谢谢

Answer 1

您需要使用传递给处理程序的事件参数，请参阅文档 http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.grid.column.Action-cfg-handler

使用事件对象，您可以查看目标并查看它是否是您要处理的元素，如果不是，您可以 return false 以防止发生任何其他事情。

Answer 2

我使用的是 ExtJs 4.2.2，我从来没有遇到过这个问题。我这样定义我的操作列：

{
    xtype: 'actioncolumn',
    items: [{
        tooltip: Lang._('Tooltip for edit'),
        handler: function(grid, ri, ci, me, e, rec, rEl) {this.up('grid').fireEvent('editAction', grid, ri, ci, me, e, rec, rEl)},
        getClass: function(value, metadata, record){
            return '[css class for background image]'
        }
    },{
        ...
    }],
    menuDisabled: true
}

我的控制器中有：

init: function(){
    this.control({
        '[xtype of grid]': {
            editAction: this.onEditAction,
        }
    })
},
onEditAction: function(grid, rowIndex, colIndex, me, event, record, rowEl){
    Ext.Msg.alert('Info', 'edit clicked')
},

可能您为操作列定义了处理程序，而不是为每个项目定义处理程序。

Answer 3

您可以使用覆盖方法 defaultRenderer 覆盖 "Ext.grid.column.Action" class。

在 actioncolumn 的项目配置中 - 提供一些自定义配置，例如图片：'image path' 文本：'your text'

并检查 defaultRenderer 方法中是否存在这些配置，因此 return

 '<span style="font-size: 14px; color:#3b87de; font-family:arial;">' + '<img src="resources/images/hide_fault.png"/>' + label + '</span>'

或

'<span style="font-size: 14px; color:#3b87de; font-family:arial; margin-left:-3px;">' + '<img src="resources/images/show_msg.png"/>' + label + '</span>'

这样，您为该项目定义的处理程序将仅在单击图像时被调用。

您可能需要处理一些 css..

如何仅在操作列图像而不是网格单元格上调用操作

How to call action only on Action column image not on grid cell

extjs

extjs-grid

extjs5