使用GWT-Ext2.0开发

使用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中的一段代码测试:

 

 

  1. /*  
  2.  * GWT-Ext Widget Library  
  3.  * Copyright(c) 2007-2008, GWT-Ext.  
  4.  * licensing@gwt-ext.com  
  5.  *  
  6.  * http://www.gwt-ext.com/license  
  7.  */  
  8.   
  9. import com.google.gwt.core.client.EntryPoint;   
  10. import com.google.gwt.user.client.ui.RootPanel;   
  11. import com.gwtext.client.widgets.CycleButton;   
  12. import com.gwtext.client.widgets.Panel;   
  13. import com.gwtext.client.widgets.event.CycleButtonListenerAdapter;   
  14. import com.gwtext.client.widgets.menu.CheckItem;   
  15.   
  16. public class CycleButtonSample implements EntryPoint {   
  17.   
  18.     public void onModuleLoad() {   
  19.         Panel panel = new Panel();   
  20.         panel.setPaddings(5);   
  21.         panel.setBorder(false);   
  22.   
  23.         //create a CycleButton   
  24.         CycleButton button = new CycleButton();   
  25.         button.setShowText(true);   
  26.         button.setPrependText("View as ");   
  27.   
  28.         //add CheckItem's to the CycleButton   
  29.         button.addItem(new CheckItem("text only", true));   
  30.         button.addItem(new CheckItem("HTML", false));   
  31.   
  32.         //log check item changes   
  33.         button.addListener(new CycleButtonListenerAdapter() {   
  34.             public void onChange(CycleButton self, CheckItem item) {   
  35.                 System.out.println(item.getText() + " selected.");   
  36.             }   
  37.         });   
  38.         panel.add(button);   
  39.   
  40.         RootPanel.get().add(panel);   
  41.     }   
  42. }  

效果不错吧。另外,到http://extjs.com/learn/Ext_Extensions#User_Themes 还可以下载到好多风格主题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值