0

在网格'actioncolumn'中，我使用'renderer'显示了一个图像，例如，

图片+文字

在操作列上单击我正在调用一些操作，

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

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

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

谢谢

4

3 回答 3

0

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

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

于 2015-02-23T11:44:49.447 回答
0

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

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

于 2015-02-23T16:10:38.877 回答
0

您可以使用覆盖方法 defaultRenderer 覆盖“Ext.grid.column.Action”类。

在 actioncolumn 的 items 配置中 - 提供一些自定义配置，例如 img: 'image path' text: 'your text'

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

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

你可能需要处理一些CSS ..

于 2015-03-06T15:26:44.060 回答