Adding icon in grid column's header

[Romick]

How can i add icon in grid an attach some action to them? For example i need to close columns.
Something like this:
im1.png
One of the possible solution can be:
in column definitions add:

{
          header: '<img src="image.png" onclick="someaction('col1')" /> Price',
          dataIndex: 'col1',
          id: 'col1', 
          width: 30
} 

but when i move mouse there apear droup down for sorting and columns visible. And i can't position the image in top right corner of the cell
Second one:

#col1 .x-column-header-inner{
           background:url("image.png") no-repeat; !important;
} 

but in second example how can i get on which column, user click and catch that in handler?

[mitchellsimoens]

If you can get the grid's header (grid.down('headercontainer')) it has a headerclick event that you can utilize.

[slemmon]

The headercontainer's headerclick event won't bubble up to the gridpanel unless that's set to bubble specifically, correct?

[mitchellsimoens]

correct

[EESW]

Romick,
Did you find a satisfactory solution? Like you, I am including the image in the header with an 'onclick'. As you said, it works, but my problem is that I'm still getting the sort behavior. I've tried extending the column sorting method, but can't determine if the user clicks on the header (and wants to sort the column) or clicks on one of my images(that calls a javascript function).

[slemmon]

A beforeheaderclick event would be nice. Something for evaluation to be able to return false like you can with beforeexpand and beforeitemclick events and whatnot.

[Romick]

No i didn't find a solution. I decided to remove sorting at all. So there are only icon and header text.

[slemmon]

Think I got it. Having the icon swallow the click event after it's rendered prevents the headerclick event.

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});


Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { 
            header: '<img class="header-icon" style="vertical-align:middle;margin-bottom:4px;" src="https://translate.zanata.org/zanata/img/silk/help.png"/> Name',  
            dataIndex: 'name' 
        },
        { header: 'Email', dataIndex: 'email', flex: 1 },
        { header: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
    , listeners: {
        afterrender: function (grid) {
            var cols = grid.down('gridcolumn');
            Ext.each(cols, function (col) {
                var icon = col.getEl().select('.header-icon')
                if (icon) { icon.swallowEvent('click', true) }
                grid.mon(icon, 'click', function () {
                    // action for the header icon click event
                    console.log('header icon click fired');
                })
            })
        }
    }
});

[Romick]

Hi i found just another way:

  Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});


Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { 
            header: '<img class="header-icon" style="vertical-align:middle;margin-bottom:4px;" src="https://translate.zanata.org/zanata/img/silk/help.png"/> Name',  
            dataIndex: 'name' 
        },
        { header: 'Email', dataIndex: 'email', flex: 1 },
        { header: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
    , listeners: {
        afterrender: function (grid) {
            var cols = grid.down('gridcolumn');
            Ext.each(cols, function (col) {
                var icon = col.getEl().select('.header-icon')
                if (icon) { icon.swallowEvent('click', true) }
                grid.mon(icon, 'click', function () {
                    // action for the header icon click event
                    console.log('header icon click fired');
                })
            })
        }
    },

    listeners: {
      'afterrender': function() {
        //Get the first header td element
        var el = Ext.fly(this.getView().headerCt.getHeaderAtIndex(1)).dom.el;//down('div');
        //Wrap the content in another div
        el.update('<div>' + el.dom.innerHTML + '</div>');
        //Insert the img element
        var insertedEl = el.insertFirst({
          tag: 'img',
          src: 'https://translate.zanata.org/zanata/img/silk/help.png', //Path to your image
          style: 'width: 10px; height:10px; cursor:hand; cursor: pointer;'//float: right; 
        });
        insertedEl.on('click', function(){
          alert('Hellow world I love you!!!');
          // action for the header icon click event
          console.log('header icon click fired');
        });
        el.down('div').setStyle('text-indent', '5px');
      }
    }
}); 

[EESW]

Slemmon and Romick,

Swallowing the click event worked perfectly! Thank you so much for your help!!