实现GWT-Ext程序的换肤功能
实现GWT-Ext的换肤功能并不难，大家也许已经注意到了，在Gwt-Ext的Showcase2的左上角就已经有了Select Theme选项。默认有Gray，Green，Indigo等几种主题样式。本文要做的仅是提取出这个功能，仅此而已，仅此而已。GWT-Ext的皮肤样式实际上使用的仍然是ExtJS的样式。所以要应用更多的样式，可以从这里 http://extjs.com/learn/Ext_Extensions#User_Themes 下载。
把下载下来的themes文件解压缩放到public目录的themes目录下(总之要和下面文件中的路径对应。)
这是一个主题更换类：
package com.test.client;import com.gwtext.client.data.Record;import com.gwtext.client.data.SimpleStore;import com.gwtext.client.data.Store;import com.gwtext.client.util.CSS;import com.gwtext.client.widgets.form.ComboBox;import com.gwtext.client.widgets.form.event.ComboBoxListenerAdapter;/** * A simple dynamic Theme Changer ComboBox. You must have the Ext theme * stylesheet declared in your host html page using the id "theme". <p/> For * example <p/> <link id="theme" rel="stylesheet" type="text/css" * href="js/ext/resources/css/xtheme-gray.css"/> or <link id="theme" * rel="stylesheet" type="text/css" href="xtheme-default.css"/> */public class ThemeChanger extends ComboBox {public ThemeChanger() {final Store store = new SimpleStore(new String[] { "theme", "label" },new Object[][] {new Object[] { "js/ext/resources/css/xtheme-gray.css","Gray" },new Object[] { "themes/BlackTheme/css/xtheme-black.css","Black" },new Object[] { "themes/green/css/xtheme-green.css","Green" },new Object[] { "themes/slate/css/xtheme-slate.css","Slate" },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("Gray");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);}} 然后在你程序中需要的地方添加如下程序即可：
Toolbar toolbar = new Toolbar();toolbar.addFill();toolbar.addItem(new ToolbarTextItem("更换主题 ")); toolbar.addSpacer();toolbar.addField(new ThemeChanger());yourpanel.setTopToolbar(toolbar);
效果就不传了，大家可以看showcase2中更换主题的效果。（javaeye贴图是在太麻烦了。）
页:
[1]