extjs 教程 java_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

Insert title here

index.js

Ext.onReady(function() {

Ext.MessageBox.alert("提示", "Hello World");

});

Tomcat欢快的跑起来。

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