欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【初学EXT】eclipse 部署EXTJS 博客分类： EXT exteclipse

程序员文章站 2024-03-22 21:30:28
...

下载：ExtJS 4.1.1 

在Eclipse中安装spket插件

 

最低要求：你需要java 1.5或更高版本运行安装程序，可独立使用
步骤：
1.作为eclipse的插件使用，按Plugin进入下载页面把他下载下来。
2.下载完成解压文件得到一个eclipse文件夹，将文件夹下的plugins和features两个文件夹拷贝到使用的 Eclipse安装包下覆盖原有同名文件夹，
3.启动Eclipse，在工具栏 window中打开preferences，弹出对话框左边会看到Spket，
4.打开Spket下的JavaScript Profile，点击 New，添加Ext（名称可自定义）
5.点击Ext，选择右边的Add Library，选择 ExtJS
6.选中ExtJS,选择右边的Add File，选中已下载的并解压的ExtJS包的根目录下的build下的sdk.jsb3
7.这时会出现很多的选择框，我是全选了，点击ok就安装好了，
8.选中Ext，点击右面的Default，ok，然后重启eclipse,如果还不行，选中建立的js文件右击，有 Open With，选择 Spket JavaScript Editor，这样就应该可以了

 

 让spket作为javascript的默认编辑器

步骤：

Eclipse 工具栏 window --> preferences --> Editors -->  File Associations --> 右面的File types选中*.js --> 下面的Associated editors选中Spket javascript Editor --> 按右面的按钮Default --> OK退出

建立js文件，的图标变成js文件对应的图片就成功了。

Hello word 项目建立

1.eclipse中新建Dynamic Web Project项目，命名为ExtjsTest
2.为避免eclipse的校验可进行如下操作
     i 选中工程右键 --> Properties --> Resource  --> Text file encoding --> Other  --> UTF-8
    ii 选中工程右键 --> Properties -->左边选Builders --> 去掉JavaScript Validation和Validation前面的勾 --> OK退出
   iii 去到工程根目录下，找到.project，用记事本打开，把两处删除掉：

 

 

[html] view plaincopyprint?
  1. <span style="font-size:14px;">第一处：  
  2. <buildCommand>  
  3.         <name>org.eclipse.wst.jsdt.core.javascriptValidator</name>  
  4.         <arguments>  
  5.         </arguments>  
  6. </buildCommand>  
  7. 第二处：  
  8. <nature>org.eclipse.wst.jsdt.core.jsNature</nature></span>  

  iiii 保存退出，refresh一下工程。
3、将ext4部署到eclipse项目中。即：将ext-all.js、ext-all-debug.js、bootstarp.js和locale文 件夹里的ext-lang-zh_CN.js以及resource整个文件夹拷入项目WebContent目录下自己指定的存放目录中
4、页面引入
<link rel="stylesheet" type="text/css" href="相对路径/resources/css/ext-all.css" /> 
<script src="Extjs/ext-all-debug.js" type="text/javascript" language="javascript" charset="UTF-8"></script>
5、我的项目目录

【初学EXT】eclipse 部署EXTJS 博客分类： EXT exteclipse

6、代码login.jsp

 

[html] view plaincopyprint?
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  7. <link href="Extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />  
  8. <script src="Extjs/ext-all-debug.js" type="text/javascript" language="javascript" charset="UTF-8"></script>  
  9. <script type="text/javascript">  
  10. Ext.application({  
  11.     name: 'HelloExt',  
  12.     launch: function() {  
  13.         Ext.create('Ext.container.Viewport', {  
  14.             layout: 'fit',  
  15.             items: [  
  16.                 {  
  17.                     title: 'Hello Ext',  
  18.                     html : 'Hello! Welcome to Ext JS.'  
  19.                 }  
  20.             ]  
  21.         });  
  22.     }  
  23. });  
  24. </script>  
  25. <title>登陆界面</title>  
  26. </head>  
  27. <body>  
  28.     <!-- <form id="loginFrom" action="">  
  29.         <table class=" ">  
  30.             <tr>  
  31.                 <td><label>用户名</label></td>  
  32.                 <td><input id="txtName" name="username" type="text" /></td>  
  33.             </tr>  
  34.             <tr>  
  35.                 <td><label>密  码</label></td>  
  36.                 <td><input id="txtPass" name="password" type="password" /></td>  
  37.             </tr>  
  38.             <tr>  
  39.                 <td >${loginMessage}</td>  
  40.             </tr>  
  41.             <tr>  
  42.                 <td><input id="btnLogin" type="button" value="登陆" onclick="javascript:login()" /></td>  
  43.                 <td><input id="btnCancel" type="button" value="新增"  
  44.                     onclick="javascript:insert()" /></td>  
  45.             </tr>  
  46.         </table>  
  47.     </form> -->  
  48. </body>  
  49. </html>  
web.xml
[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  3.     xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"  
  4.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"  
  5.     id="WebApp_ID" version="2.5">  
  6.     <display-name>ExtjsTest</display-name>  
  7.     <!-- 设置首页 -->  
  8.     <welcome-file-list>  
  9.         <welcome-file>/Login.jsp</welcome-file>  
  10.     </welcome-file-list>    
  11. </web-app>  
7、可以正常发布即可

【初学EXT】eclipse 部署EXTJS 博客分类： EXT exteclipse
查看本地API

ExtJs的帮助文档已经跟随代码被下载到电脑上了，在extjs-4.1.1/docs/文件夹中

方法一：
  将下载下来的整个ExtJs解压文件拷贝到Tomcat的webapps文件夹下，然后启动Tomcat服务器在浏览器中输http://localhost:8080/extjs-4.1.1/docs/即可进入Ext JS4.1帮助文档的首页
方法二：
  查看doc文件夹下的index.html文件，将<script type="text/javascript" src="../ext.js"></script>改成<script type="text/javascript" src="../ext-all.js"></script>，然后双击inde.html后可以正常加载API文档了。

 

 

ExtJs4.1目录结构

文件/文件夹名的作用：

    build：文件夹下有一个sdk.jsb3文件，这个文件用于eclipse中spket插件，可以实现ExtJs的代码提示功能；
    builds：压缩后的ExtJS代码，体积更小，更快；
    docs：开发文档；
    examples：官方演示示例；
    locale：多国语言资源文件；
    pkgs：ExtJS各部分功能的打包文件；
    resource：ExtJS所需要的CSS与图片文件；
    src：未压缩的源代码目录；
    bootstarp.js：ExtJS库引导文件,可通过参数自动切换ext-all.js与ext-all-debug.js；
    ext-all.js：ExtJS核心库,需要引用；
    ext-all-debug.js：ExtJS核心库的调试版,调试时使用。
注：EXTJS文件的区别：
    ext-all.js：包含所有的EXTJS框架文件，已经混淆
    ext-all-debug.js：包含所有的EXTJS框架文件，没有混淆
    ext-all-dev.js：包含所有的EXTJS框架文件，没有混淆，且包含调试信息
    ext.js：仅包含能让EXTJS运行的最小集合，已经混淆
    ext-debug.js：仅包含能让EXTJS运行的最小集合，没有混淆
    ext-dev.js：仅包含能让EXTJS运行的最小集合，没有混淆，且包含调试信息
    bootstrap.js：自动加载ext-all.js或者ext-all-debug.js，在以下情况下会加载ext-all-debug.js
        1.当前主机名是本地
        2.当前主机是使用IPV4地址
        3.Current protocol is a file
        4.其他情况下自动加载ext-all.js

参考学习：http://my.oschina.net/junn/blog/102726       http://blog.csdn.net/notenlife/article/details/8210012

 

 

相关标签： ext eclipse

上一篇： 跟着官网学Struts2使用(一) 博客分类： javaWeb知识总结 mavenstruts2java

下一篇： tortoiseSVN的安装 博客分类： 软件安装及使用 svn

推荐阅读