如何調用操作僅在操作列圖像不能在網格單元

在電網「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

如何調用操作僅在操作列圖像不能在網格單元

回答

相關問題