ExtJS(一)Myeclipse下ExtJs環境搭建


一、資源下載以及相關介紹

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.啟動服務,測試是否成功

啟動服務

打開網頁

至此,環境搭建成功

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM