1. #1
    Sencha Premium Member i.stojanovic's Avatar
    Join Date
    Oct 2010
    Location
    Kragujevac, Serbia
    Posts
    24
    Vote Rating
    0
    i.stojanovic is on a distinguished road

      0  

    Default ExtJS 4 - Icon in grid header

    ExtJS 4 - Icon in grid header


    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
    Code:
    .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.

    Code:
    #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
    There are 10 types of people in this world, those who understand binary and those who

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    1
    Vote Rating
    0
    Rich Miles is on a distinguished road

      0  

    Default Thank you

    Thank you


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

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default Thanks for sharing the code

    Thanks for sharing the code


    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/showthre...848#post646848


    Thanks in advance.

  4. #4
    Sencha User
    Join Date
    May 2013
    Posts
    9
    Vote Rating
    2
    Nishantkmr is on a distinguished road

      0  

    Default Thanks

    Thanks


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

  5. #5
    Sencha Premium Member i.stojanovic's Avatar
    Join Date
    Oct 2010
    Location
    Kragujevac, Serbia
    Posts
    24
    Vote Rating
    0
    i.stojanovic is on a distinguished road

      0  

    Default


    There is the class version

    Code:
    .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:

    Code:
    .colFlag .x-column-header-inner        { background:transparent url(/images/flag_red.png) no-repeat 4px 4px !important; text-indent:-250px; width:20px; height:20px; }
    www.codelighter.com
    There are 10 types of people in this world, those who understand binary and those who dont

Similar Threads

  1. Example: Grid column header icon
    By mankz in forum Community Discussion
    Replies: 20
    Last Post: 29 Mar 2011, 2:13 AM
  2. use icon for grid column header
    By bhomass in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 24 May 2010, 1:22 PM
  3. icon in grid header
    By rogersja in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 4 Feb 2009, 10:04 AM
  4. How to add a icon on grid header?
    By tsd1982 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 24 Feb 2008, 9:27 AM

Thread Participants: 3

Tags for this Thread