Skip to content

Instantly share code, notes, and snippets.

@branflake2267
Created February 1, 2018 23:26
Show Gist options
  • Save branflake2267/0729169213c570243f369146d326d606 to your computer and use it in GitHub Desktop.
Save branflake2267/0729169213c570243f369146d326d606 to your computer and use it in GitHub Desktop.
GXT 4 custom styles for the tab bar. Using the client bundle css resources.
.bar {
}
.bar span > span {
color: red !important;
}
import com.google.gwt.core.shared.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
public interface TabPanelResources extends ClientBundle {
public static TabPanelResources INSTANCE = GWT.create(TabPanelResources.class);
public interface Styles extends CssResource {
String bar();
}
@Source({ "styles.gss" })
Styles styles();
}
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.widget.core.client.TabItemConfig;
import com.sencha.gxt.widget.core.client.TabPanel;
import com.sencha.gxt.widget.core.client.container.Viewport;
public class TabPanelWithCustomStyles implements EntryPoint {
@Override
public void onModuleLoad() {
TabPanelResources.INSTANCE.styles().ensureInjected();
Viewport vp = new Viewport();
vp.add(createTabPanel());
RootPanel.get().add(vp);
}
private Widget createTabPanel() {
TabItemConfig config1 = new TabItemConfig();
config1.setText("Tab 1");
config1.setClosable(true);
TabItemConfig config2 = new TabItemConfig();
config2.setText("Tab 2");
config2.setClosable(true);
TabItemConfig config3 = new TabItemConfig();
config3.setText("Tab 3");
config3.setClosable(true);
TabItemConfig config4 = new TabItemConfig();
config4.setText("Tab 4");
config4.setClosable(true);
TabPanel tabs = new TabPanel();
tabs.addStyleName(TabPanelResources.INSTANCE.styles().bar());
tabs.add(new HTML("Tab 1"), config1);
tabs.add(new HTML("Tab 2"), config2);
tabs.add(new HTML("Tab 3"), config3);
tabs.add(new HTML("Tab 4"), config4);
GWT.log("bar: " + TabPanelResources.INSTANCE.styles().bar());
return tabs;
}
}
@branflake2267
Copy link
Author

screen shot 2018-02-01 at 3 25 03 pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment