GWT-Ext -- How to programmatically swap themes Wednesday, August 19, 2009 Labels: css , extjs themes , gwt , gwt swap themes , gwtext , gwtext change theme This is the source code of the nice combobox used for live changing the css theme in the gwtext demo showcase (http://www.gwt-ext.com/demo/)

public class ThemeChanger extends ComboBox {

public ThemeChanger() {

 final Store store = new SimpleStore(new String[]{"theme", "label"}, new Object[][]{
           new Object[]{"themes/green/css/xtheme-green.css", "Green"},
           new Object[]{"themes/slate/css/xtheme-slate.css", "Slate"},
       new Object[]{"js/ext/resources/css/xtheme-gray.css", "Gray"},
       new Object[]{"xtheme-default.css", "Aero Glass"},
       new Object[]{"themes/indigo/css/xtheme-indigo.css", "Indigo"},
       new Object[]{"themes/silverCherry/css/xtheme-silverCherry.css", "Silver Cherry"}
 });

 store.load();

 setFieldLabel("Select Theme");
 setEditable(false);
 setStore(store);
 setDisplayField("label");
 setForceSelection(true);
 setTriggerAction(ComboBox.ALL);
 setValue("Green");
 setFieldLabel("Switch theme");
 addListener(new ComboBoxListenerAdapter() {
    public void onSelect(ComboBox comboBox, Record record, int index) {
       String theme = record.getAsString("theme");
            CSS.swapStyleSheet("theme", theme);
    }
 });
 setWidth(100);
}
}

don't forget to add the related css includes in the GWT.xml file:

 
js/ext/resources/css/form.css
js/ext/resources/css/ext-all.css
js/ext/resources/css/xtheme-gray.css
js/ext/resources/css/xtheme-xxx ecc...

Older Post Home Newer Post