使用Myeclipse创建ExtJS项目HelloWorld程序

最新推荐文章于 2024-01-11 08:00:00 发布

manson7230

最新推荐文章于 2024-01-11 08:00:00 发布

阅读量3.4k

点赞数 1

分类专栏： Java Web 文章标签： ExtJS Web HelloWorld

本文链接：https://blog.csdn.net/u010520912/article/details/22801071

版权

Java Web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

#1创建Web Project项目

*1）打开Myeclipse(10.7.1)创建Web Project项目HelloWorld程序
File----New----Web Project(没有Web Project选项可以选择Other，再查找Web Project)

*2）启动Tomcat服务器，右击项目名----Run As----Myeclipse Server Application
并打开链接http://localhost:8080/HelloWorld/index.jsp查看Tomcat是否配置成功
如果显示HTTP Status 404 - /HelloWorld/index.jsp则可以参考这里配置Tomcat

http://blog.csdn.net/u010520912/article/details/22607177
如果显示下图则Web Project启动成功

#2引用和配置Ext JS SDK

*1）到ExtJS官网下载免费版、最新的Ext JS SDK

http://www.sencha.com/products/extjs/download/ext-js-4.2.1/2281

*2）将所需文件添加到HelloWorld程序

*ext-lang-zh_CN.js *此文件在locale文件夹（国际化文件）内，在中文环境下只需引入ext-lang-zh_CN.js

*bootstrap.js *根据路径自动调用适当的js文件，如选择调用ext-all.js或是ext-all-debug.js

*ext-all-dev.js *在发布的时候需要调用的extjs文件

*ext-all-debug.js *在调试的时候需要调用的extjs文件

*ext-all.js *在发布的时候需要调用的extjs文件

*resources *资源文件，如css和images

在WebRoot目录下新建extjs文件夹，复制bootstrap.js、ext-all-dev.js、ext-all-debug.js、ext-all.js 、resources到里面

再在extjs文件夹下新建locale文件夹，将ext-lang-zh_CN.js 复制到里面，如下图所示

#3编写HelloWorld程序

*1）编写HelloWorld代码

在WebRoot目录下新建helloworld.js文件，并添加如下代码

Ext.onReady(function(){ 
    Ext.MessageBox.alert("HelloWorld","This is the HelloWorld Aplication!");  
});

更改Index.jsp代码，如下所示，主要添加引用文件

<%@ 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%>">  
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!-- 添加引用文件 -->
	<script type="text/javascript" src="./extjs/bootstrap.js"></script>  
	<script type="text/javascript" src="./extjs/locale/ext-lang-zh_CN.js"></script>  
 
	<script type="text/javascript" src="helloworld.js"></script>  
	<link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css"/>
	<!-- 添加引用文件 -->
  </head>
  <body>
  </body>
<html>

*2）运行HelloWorld程序

在浏览器打开链接http://localhost:8080/HelloWorld/index.jsp查看是否成功，结果如下图

如果没有显示下图的结果，请用Google浏览器打开并查看控制台错误信息（按F12打开控制台）