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

在网格“actioncolumn”中，我使用“渲染器”显示了一幅图像，如

图像+文本

在“操作”列中，单击“我正在调用某些操作”

但点击事件甚至会触发点击网格单元中的空白区域。 如何防止点击空白区域

{
          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
                    }
}

如何识别点击链接（图像+文本），而不是网格单元格上的空白

{
          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
                    }
}

{
xtype:'actioncolumn'，
宽度：“17%”，
文本：“显示选项”，
渲染器：函数（值、元数据、记录）{
var标签=“”；
if（record.get（'status'）==0）{
标签=‘显示’；
etadata.style+='页边距顶部：10px；光标：指针；'；
返回“”+“”+标签+“”
}否则{
metadata.style+=“页边距顶部：10px；光标：指针；”；
标签=‘隐藏’；
返回“”+“”+标签+“”
}                              
},
处理程序：函数（grid、rowIndex、columnIndex、e）{
console.log（'handler test'）；//未触发
},
听众：{
单击：函数（网格、行索引、共索引）{
console.log（'handler test'）；//触发
}
}

---

谢谢

您需要使用传递到处理程序中的事件参数，请参阅文档

---

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

我使用的是ExtJs 4.2.2，我从来没有遇到过这个问题。我定义的actioncolumns如下：

{
    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')
},

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

您可以使用Overriden方法defaultRenderer重写“Ext.grid.column.action”类

在actioncolumn的items配置中-提供一些自定义配置，如 img:'图像路径' 文本：“您的文本”

并检查defaultRenderer方法中是否存在这些配置，然后返回

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

“”+“”+标签+“”

或

“”+“”+标签+“”

这样，只有在单击图像时才会调用为该项定义的处理程序

---

您可能需要处理一些css。

您是如何将操作链接到actioncolumn的？我经常使用actioncolumns，但从来没有遇到过这个问题。我将粘贴我通常使用的代码。您好，感谢您的快速回复，我尝试过，但没有成功，“单击”事件只会触发。但是此事件会同时处理图像+文本和单元格中的空白。OK h如果您已经配置了icon属性，则实际会使用andler。因此，如果单击侦听器正在工作，您应该能够在该函数中访问事件本身，事件通常作为单击侦听器上的最后一个参数传递是的，我将事件作为最后一个参数，当单击链接和目标时，目标是span当我点击单元格中的空白时，是div.x-grid-cell-inner。调试时我被观察到。如何在click listener中获取它。对不起-你是什么意思？我是这样做的，如果（el.dom.tagName='SPAN'| el.dom.tagName='IMG'）{//action}谢谢@mindparse