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

在电网“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 
        } 
}

感谢

来源

2015-02-23 VENKI.B

您是如何将操作链接到动作列的？我经常使用actioncolumns，从来没有这个问题。我将粘贴我通常使用的代码。 – 2015-02-23 11:51:58

我使用的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') 
},

也许你定义的处理程序中操作列，而不是definig每个项目的处理程序。

来源

2015-02-23 16:10:38

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

与事件对象，你可以看看目标，看看它的一个元素，你想处理，如果不是，你可以返回false来防止其他事情发生。

来源

2015-02-23 11:44:49 mindparse

嗨，感谢您的快速回复，我尝试过但不工作，'点击'事件只触发。但是这个事件在单元格中的图像+文本和空白空间上工作。 – 2015-02-23 11:58:02

请发布您的代码 – mindparse 2015-02-23 11:59:38

用代码更新我的查询。 – 2015-02-23 12:15:48

您可以使用overrriden方法defaultRenderer重写“Ext.grid.column.Action”类。

内部配置的actioncolumn的项目 - 提供了一些自定义的configs像 IMG：“映像路径” 文字：“你的文字”

，并检查这些CONFIGS的defaultRenderer方法，从而返回内部存在性

'<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>'

这样的处理程序，你定义它只有当图像被点击时才会调用em。

您可能需要照顾一些CSS ..

来源

2015-03-06 15:26:44 Yellen

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

回答

相关问题