一、資源下載以及相關介紹
Ext開發包,我們可以從官方網站里進行下載
http://www.sencha.com/products/extjs/download
筆者下載位置為Myeclipse根目錄下
Ext開發包目錄結構說明
builds目錄為ExtJS壓縮后的代碼
docs目錄為ExtJS的文檔
examples目錄中是官方的演示示例
locale是多國語言的資源文件,其中ext-lang-zh_CN.js是簡體中文,必須引入
overview是ExtJS的功能概述
pkgs中是ExtJS各部分功能的打包文件
resource中書ExtJS要用到的圖片文件與樣式表文件,必須引入
src目錄是未壓縮的源碼
bootstrap.js是ExtJS庫的引導文件,通過參數可以自動切換ext-all.js和ext-debug.js
ext-all.js文件是ExtJS的核心庫,是必須要引入的
ext-all-debug.js文件是-all.extjs的調試版,在調試的時候可能需要使用
二、測試
1.新建JavaWeb項目,名稱為EasyExt1;
2.在WebRoot目錄下新建js文件夾,並在js目錄下新建extjs文件夾
3.將下載的Ext開發包(筆者放在Myeclipse目錄下)中的resources、ext-all-debug.js、ext-all.js、ext-lang-zh_CN.js復制到extjs文件夾下
4. 載Webroot文件夾下新建index.jsp、test.js文件(用來測試HelloWorld),代碼如下
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HelloWorld</title> <!--樣式文件--> <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" /> <!--核心文件--> <script language="javascript" type="text/javascript" src="js/extjs/ext-all-debug.js"></script> <!--國際化文件--> <script language="javascript" type="text/javascript" src="js/extjs/ext-lang-zh_CN.js"></script> <script language="javascript" type="text/javascript" src="test.js"></script> </head> <body> This is my JSP page. <br> </body> </html>
Ext.onReady(function(){ Ext.MessageBox.alert("提示信息","HelloWorld"); });
4.啟動服務,測試是否成功
啟動服務
打開網頁
至此,環境搭建成功