ExtJS 4 - Icon in grid header

[i.stojanovic]

Hi,

ExtJS 4 has changed the way of displaying icons in the grid header.

In the version 3 was necessary, within the definition of columns, to define the ID for the column, for example. id: 'colFlag', and create CSS class

.x-grid3-hd-colFlag { background:transparent url(/images/flag_red.png) no-repeat 3px 3px !important; text-indent:-250px; }

Version 4 is the other defining the id of a grid column, but changed the method of defining class.


#colFlag .x-column-header-inner { background:transparent url(/images/flag_red.png) no-repeat 3px 3px !important; text-indent:-250px; }

I hope that someone will be helpful

Greeting

------

www.codelighter.com
(http://www.codelighter.com/)There are 10 types of people in this world, those who understand binary and those who

[Rich Miles]

I just wanted to let you know that this was extremely helpful.

[netemp]

Hi i.stojanovic


Thanks for sharing the information. Its really useful.


I am trying to do something similar to the grid headers, that is modify the class so that they get wrapped around the available column width. Could you please guide me in this if possible, as I am not being able to get it working inspite of trying white-space:normal, word-wrap etc..


I have posted a question here too - http://www.sencha.com/forum/showthread.php?146615-ExtJs-4-How-to-wrap-a-column-header-text-to-fit-in-the-column-width&p=646848#post646848


Thanks in advance.

[Nishantkmr]

It really helped..... Thanks a lot for the info.

[i.stojanovic]

There is the class version


.colFlag .x-column-header-inner { background:transparent url(/images/flag_red.png) no-repeat 3px 3px !important; text-indent:-250px; }

and then in column cofiguration put cls:'colFlag' instead of id:'colFlag'. It's better if you have more then one grid object on same page with same icon column. Old code with ID still work

I found that in ExtJS 4.2.1 correct CSS code is:


.colFlag .x-column-header-inner { background:transparent url(/images/flag_red.png) no-repeat 4px 4px !important; text-indent:-250px; width:20px; height:20px; }