View Full Version : Clickable icon in column header

5 Jan 2012, 4:39 AM
We have a customer who wants help/info icons next to the headertext. Since they are used to clicking such icons it would be best if that was possible and that the sort function only triggered when the click is anywhere but the icon. If that's not possible I guess a tooltip would be acceptable.

I have been searching the forum for something like this and have found two rather useful threads. However they all seem to be solutions for older (not 4.x) versions of Ext JS.

I'm grateful for all help I can get, whether it's a full blown example or just a push in the right direction. :)

5 Jan 2012, 7:37 AM
I don't have a solution for the clickable icons in the headers, but here (http://www.sencha.com/forum/showthread.php?132637-Ext.ux.grid.HeaderToolTip) you'll find a plugin for the tooltips.

5 Jan 2012, 10:44 AM
As for the icon here's what I might do:

xtype: 'gridpanel'
, title: 'Associated Apps'
, columns: [{
text: '<img class="header-icon" style="vertical-align:middle;margin-bottom:4px;" src="../JSLibrary/resources/icons/fugue/shadowless/address-book.png"/> one'
}, {
text: 'two'
, store: {
fields: []
, data: []
, listeners: {
afterrender: function () {
this.down('headercontainer').on('headerclick', function (header, col, e, element) {
if (Ext.fly(e.getTarget()).hasCls('header-icon')) {
// icon action

9 Jan 2012, 12:26 AM
Thanks for the help. I got to pretty much the same thing when I tried this myself. Problem with this solution is that the headerclick event on the header also triggers when I click the icon which in turn makes the grid sort on that header.

Any thoughts on how to solve this problem?

15 Jan 2012, 3:25 PM
Think I got it. Having the icon swallow the click event after it's rendered prevents the headerclick event.

Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "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');

2 Oct 2013, 12:43 PM
thanks for the help!
An easier workaround to keep the column from sorting when you click the header is to set

sortable: false
in the column configurations