sencha GXT CSS类

Question

i'm having problems with styling grid in gxt, the thing is that the elements in the grid get (i don't know how exactly) css class named ".GKA1XC4LIC" and this class overrides the settings, provided by my own css class (in my own css file). However some properties (like font-size) i'm able to change with my class (i mean my css file is being loaded).

i guess this .GKA1XC4LIC class is generated somewhere i don't know where. Why it is done this way? Am i doing this completely wrong?

i set class name like this:

codeColumnConfig.setColumnTextClassName("smk-grid-text");

thanks

Answer 1

I assume you are using GXT3. You said some properties are set by changing the css. That is because the GXT3 has not set them and so they work.

To do use the GXT3 Appearnces correctly, it may be best to see this section Styling a GXT 3 application in the migration guide. It's about the middle of the page.

It explains the two ways to modify the Appearance pattern that GXT3 uses.

1. via configuration (in the GWT module XML file)
2. via constructor arguments

There is another explanation in the Sencha docs for Appearances

That said, that is pretty involved depending on how much you need to change things.

To do it quickly, I sometimes use a cell to render it how I need:

For example to render a cell in a grid a particular way I would do

        ColumnConfig<Users, String> userCol = new ColumnConfig<SelectUserDialog.Users, String>(selectUserProperties.userName(), 240);

        AbstractCell<String> c2 = new AbstractCell<String>() {

            @Override public void render(com.google.gwt.cell.client.Cell.Context context, String value, SafeHtmlBuilder sb) {
                value = "<div  style=\"font-size:2.5EM; line-height : 30px; height=40px\" >" + value + "</div>";
                sb.appendHtmlConstant(value);
            }
        };

        userCol.setCell(c2);

If you are not using ColumnConfig already, you may need to see ValueProvider and ProperyAccess