Question

在网格'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
                    }
}

由于

Answer 1

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

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

Answer 2

我使用的是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列定义了处理程序，而不是为每个项定义处理程序。

Answer 3

您可以覆盖＆＃34; Ext.grid.column.Action＆＃34; class with overrriden方法defaultRenderer。

在actioncolumn的items配置中 - 提供一些自定义配置 img：＆＃39;图片路径＆＃39; 文字：＆＃39;您的文字＆＃39;

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

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

3 个答案: