下載: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,用記事本打開,把兩處刪除掉:
第一處:
<buildCommand>
<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
<arguments>
</arguments>
</buildCommand>
第二處:
<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
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="登陸" οnclick="javascript:login()" /></td>
<td><input id="btnCancel" type="button" value="新增"
οnclick="javascript:insert()" /></td>
</tr>
</table>
</form> -->
</body>
</html>
web.xml<?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>
7、可以正常發佈即可
查看本地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