实现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贴图是在太麻烦了。)
分享到:
相关推荐
GWT-Ext 是基于 Google ...本系列文章将详细讲解 GWT-Ext 的基本结构和功能特点,并通过代码示例来演示该技术的具体实现。本文是该系列的第一部分,将带领您快速入门 GWT-Ext,并演示如何快速搭建 GWT-Ext 的开发环境。
Gwt-ext学习笔记之基础篇、安装、配置、例子。
最好的gwt-ext学习资料,适合初学者。
本系列文章将详细讲解 GWT-Ext 的基本结构和功能特点,并通过代码示例来演示该技术的具体实现。本文是 GWT-Ext 体验之旅系列 的第 3 部分,我们将体验各种布局管理器的效果,了解我们常用的布局管理器的编程方式和...
GWT-Ext 是基于 Google Web Toolkit(GWT)和 ExtJs 的功能强大的网页开发控件库。它扩展了 GWT,在 ExtJs 的基础上实现了有排序功能的表格(Grid)、分页、过滤,支持有拖拽功能的树,高度可定制的组合下拉框...
gwt-ext-选课系统gwt-ext-选课系统gwt-ext-选课系统gwt-ext-选课系统
Gwt-ext学习笔记,Gwt-ext学习笔记,Gwt-ext学习笔记
GWT-Ext 控件演示 GWT-Ext 控件演示
GWT-Ext 2.0.5 has been released. Grab the distribution from the Downloads area. GWT-Ext 2.0.5 supports GWT 1.5 final (1.5.2), Firefox3 and Chrome.
gwt-ext-treegwt-ext-treegwt-ext-treegwt-ext-treegwt-ext-tree
GWT-Ext超级Widget功能类库.zip Google code
NULL 博文链接:https://kenter1643.iteye.com/blog/323084
个人学习收集网上资料辛苦整理而成; GWT-Ext 整理 chm java js GWT-Ext资料整理.chm
这是一篇非常好的GWT-Ext的文章,讲解非常详细,从入门的讲解示例再到精通一应俱全,学习GWT-Ext的朋友可以看看
GWT-Ext_体验之旅.doc GWT-Ext_体验之旅.doc GWT-Ext_体验之旅.doc
各种各样的资源找齐还是要点时间的: 1、下载gwt-ext2.04解压 2、解压本资源,导入Eclipse 3、将解压gwt-ext2.04得到一jar包设入classpath 4、按载图编辑你的src 文件夹
gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-...
gwt-ext相关jar包及资源