Ext2.0发布了,相对于1.1来说,做了很多改变,组件模型提供了默认的构造,加入了很多新的组件。Gwt-Ext也针对Ext2.0的更新,发布了相应版本,DEMO地址是: http://www.gwt-ext.com/demo/ 效果还是相当不错的,下面我们就来配置Gwt-Ext2的Eclipse项目。
* 下载Gwt-Ext2和Ext2
Gwt-ext http://code.google.com/p/gwt-ext/ Extjs: http://extjs.com/download
* 创建标准Gwt项目,并新建一个Module。(可以参见:http://llvh.blog.163.com/blog/static/11751105200710834218918/)
* 在Module的XML文件中加入
<inherits name='com.gwtext.GwtExt'/>
* 在public目录下新建文件夹js/ext
* 将下载的Ext2中的adapter、resourdes目录,和ext-all.js、ext-core.js两个JS 文件拷贝到刚才建的ext目录下。
* 修改Module入口Html文件
* 加入以下内容
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/xtheme-gray.css" />
<script type="text/javascript" src="js/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="js/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>
修改<body>标签
<body class="xtheme-gray">
这样就算是将GWT-EXT2配置完了,不过一定要记得在运行的时候要加上-Xmx128m
选择Run as -> Open Run Dialog ,在java application中找到GWT项目的名字,选中后换到Arguments选项卡,在在VM arguments中输入-Xmx128m(或者分更多的内存)保存后就可以运行了。
下面用Gwt-Ext2 的ShowCase2中的一段代码测试:
- /*
- * GWT-Ext Widget Library
- * Copyright(c) 2007-2008, GWT-Ext.
- * licensing@gwt-ext.com
- *
- * http://www.gwt-ext.com/license
- */
- import com.google.gwt.core.client.EntryPoint;
- import com.google.gwt.user.client.ui.RootPanel;
- import com.gwtext.client.widgets.CycleButton;
- import com.gwtext.client.widgets.Panel;
- import com.gwtext.client.widgets.event.CycleButtonListenerAdapter;
- import com.gwtext.client.widgets.menu.CheckItem;
- public class CycleButtonSample implements EntryPoint {
- public void onModuleLoad() {
- Panel panel = new Panel();
- panel.setPaddings(5);
- panel.setBorder(false);
- //create a CycleButton
- CycleButton button = new CycleButton();
- button.setShowText(true);
- button.setPrependText("View as ");
- //add CheckItem's to the CycleButton
- button.addItem(new CheckItem("text only", true));
- button.addItem(new CheckItem("HTML", false));
- //log check item changes
- button.addListener(new CycleButtonListenerAdapter() {
- public void onChange(CycleButton self, CheckItem item) {
- System.out.println(item.getText() + " selected.");
- }
- });
- panel.add(button);
- RootPanel.get().add(panel);
- }
- }
效果不错吧。另外,到http://extjs.com/learn/Ext_Extensions#User_Themes 还可以下载到好多风格主题。