Как вызвать действие только на колонке Действие изображения не на ячейки сетки

Question

В сетке «actioncolumn» я отображается изображение с помощью «визуализатор», как,

изображение + текст

В колонке действий нажмите я звоню некоторые action,

, но событие click вызывает даже щелчок по пустому пространству в ячейке сетки. как предотвратить это щелчок на пустом месте.

как идентифицировать ссылку на ссылку (изображение + текст), а не на ячейку сетки пустое пространство.

{ 
      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

Я использую 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 обработчик для каждого элемента.

Answer 2

Вы должны использовать параметр события, передаваемый в обработчик, увидеть документы http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.grid.column.Action-cfg-handler

С объектом события вы можете посмотреть на цели и посмотреть, если ее элемент вы хотите для обработки, если это не так, вы можете просто вернуть false, чтобы предотвратить что-либо еще.

Answer 3

Вы можете переопределить класс «Ext.grid.column.Action» с помощью метода overrriden defaultRenderer.

Внутри конфигурационных элементов из actioncolumn - предоставить некоторые пользовательские конфиги как IMG: «путь к изображению» текста: «текст»

и проверьте existense этих конфигов внутри метода 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 ..