How to call action only on Action column image not on grid cell

Question

In grid 'actioncolumn' i displayed an image using 'renderer' like,

image + text

On action column click i am calling some action,

but click event is triggering even click on empty space in grid cell. how to prevent that click on empty space.

how to identify click on link (image+text), not on grid cell empty space.

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

Thanks

How did you link the action to the actioncolumn? I frequently use actioncolumns and never had this issue. I will paste the code I usually use. — Lorenz Meyer, Feb 23 '15 at 11:51

score 0 · Answer 1 · answered Feb 23 '15 at 11:44

0

You need to use the event parameter passed into the handler, see the docs http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.grid.column.Action-cfg-handler

With the event object you can look at the target and see if its an element you want to process, if it's not you can just return false to prevent anything else happening.

answered Feb 23 '15 at 11:44

mindparse

6,115
27
90
191

Hi thanks for your quick reply, i tried but not working, 'click' event only triggering. but this event working on both image+text and empty space in cell. – VENKI.B Feb 23 '15 at 11:58
OK handler is actually used if you have configured the icon property which in your case you are not. So if the click listener is working, you should be able to get to the event itself in that function, event is normally passed as the last param on a click listener – mindparse Feb 23 '15 at 12:55
Yes, I am getting event as last param, and target is span when click on link and target is div.x-grid-cell-inner when i click on empty space in cell. I am observed while debugging. how to get it in click listener. – VENKI.B Feb 23 '15 at 13:46
Sorry - what do you mean? – mindparse Feb 23 '15 at 13:46
I did it like this if(el.dom.tagName=='SPAN' || el.dom.tagName=='IMG' ){ //action } Thank you @mindparse – VENKI.B Feb 23 '15 at 17:13

score 0 · Accepted Answer · answered Feb 23 '15 at 16:10

I'm using ExtJs 4.2.2, and I never had the issue. I define my actioncolumns like this:

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

The in the controller I have:

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')
},

Probably you defined the handler for the action column, instead of definig a handler for each item.

score 0 · Answer 3 · answered Mar 06 '15 at 15:26

You can override the "Ext.grid.column.Action" class with an overrriden method defaultRenderer.

Inside the items config of the actioncolumn - provide some custom configs like img: 'image path' text: 'your text'

and check for the existense of these configs inside the defaultRenderer method and thus return

 '<span style="font-size: 14px; color:#3b87de; font-family:arial;">' + '<img src="resources/images/hide_fault.png"/>' + label + '</span>'

or

'<span style="font-size: 14px; color:#3b87de; font-family:arial; margin-left:-3px;">' + '<img src="resources/images/show_msg.png"/>' + label + '</span>'

This way the handler that you define for that item will be invoked only when the image is clicked.

You might have to take care of some css..

How to call action only on Action column image not on grid cell

3 Answers3