前言
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已经可以正常使用了。