ExtJS实战 01——HelloWorld

前言

Extjs5的发布已经有些日子了，目前的最新稳定版本是Extjs5.1.0，我们可以在官方网站进行下载。不过笔者今天访问得到的是502Bad Gateway，原因可能是sencha的nigix没有配置好缓冲。

如果E文比较好，建议跳过本系列教程，直接阅读官方5.1文档。

 

正文

Extjs是开源的遵循GPL协议，我们下载到的文件包含了源代码，我们要在这堆源代码中找到Extjs5的真正需要引用的文件。

这些文件在build文件夹下。我们首先需要引用的是ext.all.js，（ext.all-debug.js也一样）这个文件包含了所有Extjs的控件，它是经过压缩处理过的，目前的大小是4.4M，仍然比较庞大。

然后，我们会看到bootstrap.js，这是决定加载哪一个extJS的文件。我们暂时不使用这种方式加载ExtJS。

然后是/build/packages文件夹，这个文件夹下面包含了extjs的主题、语言包等，我们需要找到有用的内容。最精简的引用如下。

ext-locale是本地化语言包，我们只保留里面的ext-locale-zh_CN-debug.js，这个是简体中文语言包。

/build/packages下包含theme文件名的文件夹都是extjs的主题包，包括经典主题、清新主题、灰色主题和海王星主题沙盒主题，其中ext-theme-crisp（清新主题）是 extjs5新增的；ext-theme-neptune（海王星主题）是extjs4中新增的。经典主题和灰色主题大家会比较熟悉，从extjs诞生就 存在的两个主题。

了解完这些文件夹之后，我们就开始创建一个页面，然后在页面中引入extjs，并完成一个helloworld示例来结束本篇内容。

创建Hello World示例

在Eclipse中，我们创建一个空Web应用程序，将上图必要的的extjs放入项目中，我们的目录结构如下：

index.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">
<title>Insert title here</title>

<script type="text/javascript" src="ExtJS/build/ext-all-debug.js"></script>
<script type="text/javascript" src="ExtJS/packages/locale/ext-locale-zh_CN-debug.js"></script>
<link href="ExtJS/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" />

<script type="text/javascript" src="js/index.js"></script>
</head>
<body>

</body>
</html>

index.js

Ext.onReady(function() {
    Ext.MessageBox.alert("提示", "Hello World");
});

Tomcat欢快的跑起来。

浏览器中会弹出如图的提示窗口，如果你也看到了这个窗口，说明你的引用的正确的，Extjs5已经可以正常使用了。

posted @ 2015-04-25 11:25  Java_Code  阅读(419)  评论(0)  编辑  收藏  举报