GWT Ext - How to set the grid cell background color

Note: The similar problem we solved using the GXT library (Ext GWT) here.

So, again, we solve the whole trick in the rederer of the cell, and we play with the CellMetadata parameter.

ColumnConfig cc = new ColumnConfig();
final String bgColor = "yellow";

cc.setRenderer(new Renderer() {

   public String render(Object value,
      CellMetadata cellMetadata, Record record,
      int rowIndex, int colNum, Store store) {

          String htmlAttr = "style='background-color:" + bgColor + ";'";

          return (value != null ? value.toString() : null);

Note: This code always puts the background color for grid cell. So, in the renderer code, you have to add the condition when you want to have the backgroud color set for that particular grid cell.



  1. Hi, I have a problem. I must set a background color and I must renderer an image icon in the same grid-cell. How can I set this for a grid-cell?

  2. Is this for the GWT-Ext (dead one) library ?

    You have to try something like this:

    String htmlAttr = "style='background-color:yellow; background-image: url(gray_gradient.gif);background-repeat: no-repeat;'";


    Note: I didn't try it yet, but you have to play with the CSS attributes...

    If that isn't working, just let me another comment, and I'll build a test case for you, ok?


  3. The method described works, but I can not center the image.
    How could I do?

  4. To center the background image of your grid cell you have to add to the "style" this new attribute:
    background-position:50% like in the following example:

    String htmlAttr = "style='background-color:yellow; background-image: url(gray_gradient.gif);background-repeat: no-repeat;background-position:50%;'";


    I'm glad I could help.


  5. I posted this solution HERE to be easier to find.


  6. How to put a legend on a chart. Object there is no method LineChart setLegend?
    Use gwt-ext 2.
    I have by
    I have to play different graphs with different dates

  7. Are you talking about the LineChart that comes with the dead framework GWT-Ext?

    Why not using the OFCGWT Charts ( ? which is free, is built on top of GWT and it's very nice looking ...


  8. Ok thanks just yesterday I started using OFCGWT.


  9. How to customize the values of the tooltip in a graph?

  10. Usually using the function "setTooltip" from the class com.rednels.ofcgwt.client.model.elements.Element

    /* Sets the tooltip text (#val# is the default) */
    public void setTooltip(java.lang.String tooltip);

  11. All classes that are direct Known Subclasses of "Element":
    BarChart, HorizontalBarChart, LineChart, PieChart, ScatterChart, Shape, StackedBarChart.

  12. My problem is that the line of the graph I would like to see the data that represents.

  13. What would be the AJAX/EXT JS equivalant to this?

    I'm using ColdFusion 8, CFGrid format=HTML with bind to call a query to get data, and IE 7.

    After my CFGrid tag, I use to call my JavaScript routine.

    My JavaScript routine is:

    function gridSetup()
    //So the Grid's page bar does NOT show
    //NOTE: My grid name=results
    var myGrid = ColdFusion.Grid.getGridObject('results');

    //So columns autosize to fit the Grid's width

    I assume I'll add your ExtJS code to my JavaScript routine. I've looked and looked and have run out of time. Thank you so very, very much for your help.

  14. Sorry I've got an incomplete sentence above, it should read:

    After my CFGrid tag, I use "ajaxOnLoad" to call my JavaScript routine.

  15. My above code from the article is written in pure Java - not JavaScript - due to the GWT-Ext library, which is a widgets library based on GWT technology.

    The GWT allows to develop GUI in Java, then it compiles automatically to JavaScript, and execute JS in browser, but the developer doesn't change or manipulate the JavaScript directly (with some small exceptions - native functions).

    So, what do you really want, actually ?


  16. Thank you so much !!!!!!! It works great