下載：ExtJS 4.1.1
在Eclipse中安裝spket插件
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，用記事本打開，把兩處刪除掉：
- <span style="font-size:14px;">第一處：
- <buildCommand>
- <name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
- <arguments>
- </arguments>
- </buildCommand>
- 第二處：
- <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、我的項目目錄
6、代碼login.jsp
- <%@ page language="java" contentType="text/html; charset=utf-8"
- pageEncoding="utf-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <link href="Extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
- <script src="Extjs/ext-all-debug.js" type="text/javascript" language="javascript" charset="UTF-8"></script>
- <script type="text/javascript">
- Ext.application({
- name: 'HelloExt',
- launch: function() {
- Ext.create('Ext.container.Viewport', {
- layout: 'fit',
- items: [
- {
- title: 'Hello Ext',
- html : 'Hello! Welcome to Ext JS.'
- }
- ]
- });
- }
- });
- </script>
- <title>登陸界面</title>
- </head>
- <body>
- <!-- <form id="loginFrom" action="">
- <table class=" ">
- <tr>
- <td><label>用戶名</label></td>
- <td><input id="txtName" name="username" type="text" /></td>
- </tr>
- <tr>
- <td><label>密 碼</label></td>
- <td><input id="txtPass" name="password" type="password" /></td>
- </tr>
- <tr>
- <td >${loginMessage}</td>
- </tr>
- <tr>
- <td><input id="btnLogin" type="button" value="登陸" onclick="javascript:login()" /></td>
- <td><input id="btnCancel" type="button" value="新增"
- onclick="javascript:insert()" /></td>
- </tr>
- </table>
- </form> -->
- </body>
- </html>
- <?xml version="1.0" encoding="UTF-8"?>
- <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
- xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
- id="WebApp_ID" version="2.5">
- <display-name>ExtjsTest</display-name>
- <!-- 設置首頁 -->
- <welcome-file-list>
- <welcome-file>/Login.jsp</welcome-file>
- </welcome-file-list>
- </web-app>
查看本地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