1. #1
    Ext User
    Join Date
    Mar 2010
    Posts
    5
    Vote Rating
    0
    disconnect is on a distinguished road

      0  

    Question How to change the background-image in the header of a grid?

    How to change the background-image in the header of a grid?


    How can i change the background-image of the Headercolumn in a grid?

    I've seen that it is possible by changing the css.


    .x-grid3-header
    {
    background-image:url(./img/bg-image.jpg);
    }

    But this setting here is for all grids in the application. My problem is, that i need different looking grids in my application, so i have to change the background-image programmatically.

    I've seen some examples in this forum where the background-color of the rows get changed due to a renderer. But is there a similar way to do it for the columnheader?

    public


    Object render(PatientsOverviewModel model, String property,
    ColumnData config, int rowIndex, int colIndex,
    ListStore<PatientsOverviewModel> store,
    Grid<PatientsOverviewModel> grid) {
    config.style = "background-color: blue;";
    return model.get(property);
    }

    In addition i've found the following line in the ColumnHeader.class where the x-grid3-header class is set.
    cf.setStyleName(row, col, "x-grid3-header x-grid3-hd x-grid3-cell");

    But how can i do this in my custom class?

    Thanks in advance for any help


  2. #2
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    You can use css selectors for this.

    Code:
    grid.addStyleName("mycustomstyle");
    and than as rule oyu can use

    Code:
    .mycustomstyle .x-grid3-header
    {
    background-image:url(./img/bg-image.jpg);
    }

  3. #3
    Ext User
    Join Date
    Mar 2010
    Posts
    5
    Vote Rating
    0
    disconnect is on a distinguished road

      0  

    Thumbs up


    Thanks Sven!

    This works fine, but only under the following condition i figured out:

    There is missing one important information ! @All others who have the same issue please notice the following:

    Don't forget to comment out the original settings in the gxt-all.css, because the custom css in mycustomstyle class does not overwrite the original settings in x-grid3-header . It renders the background-image in a div above from the div where the the x-grid3-header is set !!! I wouldn't take effect, because the custom css gets still overwritten by the original css class !

    .x-grid3-header
    {
    /*background-color:#f9f9f9;
    background-image:url(../images/default/grid/grid3-hrow.gif);*/

    }

  4. #4
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    You should not change gxt-all.css. This makes updating impossible in an easy way. Simple mark your rule as important

Thread Participants: 1