PDA

View Full Version : ExtJS 4 - Icon in grid header



i.stojanovic
6 May 2011, 1:35 AM
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
14 Jul 2011, 11:47 AM
I just wanted to let you know that this was extremely helpful.

netemp
9 Sep 2011, 6:01 AM
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
11 Jul 2013, 12:56 AM
It really helped..... Thanks a lot for the info.

i.stojanovic
11 Jul 2013, 3:30 AM
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; }