实现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贴图是在太麻烦了。）

评论

2 楼 tanleihaoren 2009-01-06  

我有这么笨麽？

1 楼 may_cauc 2009-01-06  

楼主说的是EXT-GWT吧，这和GWT-EXT完全是两个项目哦