View Full Version : How to add icon in GridPanel header?

12 Nov 2010, 5:38 AM

I want to add icon (image) besides GridPanel column header. I know how to render icon in cell but not in header.

Can anyone help?

Thanks in Advance

12 Nov 2010, 5:55 AM
You can pass an html blob as the header (http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.Column&member=header) config of columns.

12 Nov 2010, 5:57 AM
code hint?

12 Nov 2010, 6:53 AM
You can pass an img tag for instance...

I had coded this example a while ago, I did not know we could pass html tags in the header cfg at that moment, but that works.

Ext.onReady(function() {

var grid = new Ext.grid.GridPanel({
renderTo: document.body,
height: 100,
width: 500,
columns: [
{ header: 'Test1' },
{ header: 'Test2' }
store: new Ext.data.JsonStore(),
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');

9 Aug 2011, 9:00 AM
An example of the cleanest way to do this is:

header : '<img src="images/image1.png" height="10" width="10" alt=""/>Image One'

Height, width, and alt are not necessary, but can be quite helpful.
'Image One' also isn't needed, but is an example of how you would add text as well.