gxt: custom grid cell style

Question

I want to create custom cell in grid. This is not a problem. The problem: text in this custom cell has incorrect style.

myColumn.setRenderer(new GridCellRenderer<TaskModel>() {
        public Object render(TaskModel model, String property, ColumnData config, int rowIndex, int colIndex, ListStore<TaskModel> taskModelListStore, Grid<TaskModel> taskModelGrid) {
            VerticalPanel panel = new VerticalPanel();

            Html html = new Html("xxxx");

            Button b = new Button("xxxxxxxx");

            panel.add(html);
            panel.add(b);

            return panel;
        }
    });

Why this happened?

Answer 1

You must set style for your own.

 Html html = new Html("<div class=\"myStyle\">xxxx</div>");

then in stylesheet.css file (it may be named different depending on your project setup)

.myStyle {
    //style you want
}

or inline, if you don't want edit style file, for eg.:

 Html html = new Html("<div style=\"font-weight: bold;\">xxxx</div>");

However I prefer storing styles where its place is, outside the code (as in my first suggestion)

Answer 2

If you want the text styled the same way as other GXT text, create a GXT Text object and add that instead. If you want a custom style, then you'll need to use your own CSS as suggested by @denu.

I think something like new Text("xxxx"); might be what you want.

Answer 3

@Travis What the difference:

ColumnConfig column1 = new ColumnConfig("1", 200);
        column1.setRenderer(new GridCellRenderer<TaskModel>() {
            public Object render(TaskModel model, String property, ColumnData config, int rowIndex, int colIndex, ListStore<TaskModel> taskModelListStore, Grid<TaskModel> taskModelGrid) {
                VerticalPanel panel1 = new VerticalPanel();

                panel1.add(new Html("html"));
                panel1.add(new Label("label"));
                panel1.add(new Text("text"));
                panel1.add(new Button("button"));
                return panel1;
            }
        });
        ColumnConfig column2 = new ColumnConfig("2", 200);
        column2.setRenderer(new GridCellRenderer<TaskModel>() {
            public Object render(TaskModel model, String property, ColumnData config, int rowIndex, int colIndex, ListStore<TaskModel> taskModelListStore, Grid<TaskModel> taskModelGrid) {
                return new Text("text");
            }
        });