使用GWT-Ext2.0开发

luoke920

浏览: 591357 次

最近访客更多访客>>

zwtao

wyisdaniel

richyyang1314

jingtao232

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

GWT EXT CSS YUI JavaScript

使用GWT-Ext2.0开发

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
* 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 还可以下载到好多风格主题。

分享到：

oracle中使用on delete cascade和on delet ... | javascript---window.location和window.ope ...

2008-11-27 15:54
浏览 1646
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论