View Full Version : Adding icon in grid column's header

28 Sep 2010, 6:32 AM
Hi. Does anyone know how to add icon in grid column's header? I have a column that's intended for comment counts and I want to add icon in the header so that the user will know that this column is for comments. Any idea would be much appreciated. Thanks!

28 Sep 2010, 7:38 AM
This could be one way, but I am modifying a bit the dom structure inside the td element of the header, so it might cause some problems...

//Listeners config for the grid
listeners: {
'afterrender': function() {

//Get the first header td element
var el = Ext.fly(this.getView().getHeaderCell(0)).down('div');

//Wrap the content in another div
el.update('<div>' + el.dom.innerHTML + '</div>');

//Insert the img element
tag: 'img',
src: 'img/bricks.png', //Path to your image
style: 'float: left;'

el.down('div').setStyle('text-indent', '5px');

28 Sep 2010, 7:52 AM
Thank you! I'll try this. This could be a great help! :D

28 Sep 2010, 7:56 AM
You can also just supply inline html code to the header config. Look at the API Docs and it will explain that you can supply HTML tags so you could just create a custom css class and supply that to the header.

{header: '<img class="myicon" src="' + Ext.BLANK_IMAGE_URL + '" />Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},

.myicon {float: left;
height: 16px;
background-image: url(pathtoyourpic);

28 Sep 2010, 8:01 AM

Yeah.. I thought of that also. Sure will try that. Thank you for this brilliant ideas! :)