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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi