How to style multiple grids differently

[Leowill]

I created a class named FileGridAppearance like this:

public class FileGridAppearance extends GridBaseAppearance {

    public interface FileGridStyle extends GridStyle {


    }


    public interface FileGridResources extends GridResources {
        @Source({
                "com/sencha/gxt/theme/base/client/grid/Grid.css", "FileGrid.css"
        })
        @Override
        FileGridStyle css();
    }


    public FileGridAppearance() {
        this(GWT.<FileGridResources> create(FileGridResources.class));
    }


    public FileGridAppearance(FileGridResources resources) {
        super(resources);
    }



}

then I created a grid object

Grid grid = new Grid<FileModel>(getListStore(), getColumnModel());grid.setView(new GridView<FileModel>(new   FileGridAppearance()));

this worked well.
When I create another grid without calling setView method, it should use default GridAppearance, however, it has the same appearance with the first one.

I saw that @Shared annotation before
public interface GridDataTableStyles extends CssResource
in GridView class.Does that cause the problem?Anybody can help me to solve the problem?Thanks very much.

[Colin Alworth]

This is a bug in the 3.0 release - we are working to change it for 3.1, but could not fix it in a bugfix release, as it requires some API-breaking changes. I've linked this to an internal bug so that we are sure to update this with any progress.

In the meantime, a workaround: Consider declaring a css class to apply to the root of the grid (added via grid.addStyleName(String)), and namespace your other CSS with that same class name. For example, when changing the rowHighlight behavior, prefix the selector with this other class:

.myGrid .rowHighlight {
  border: 1px dotted #aabbcc;
}

[Leowill]

Thanks for replying.