前言

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

ExtJS实战 01——HelloWorld的更多相关文章

  1. AngularJS 系列 01 - HelloWorld和数据绑定

    目录导读: AngularJS 系列 学习笔记 目录篇 前言: 好记性不如烂键盘,随笔就是随手笔记,希望以后有用. 本篇目录: 1. Hello World 2. AngularJS中的数据绑定 3. ...

  2. redis实战(01)_redis安装

    早就想对redis进行实战操作了,最近看了一些视频和参考书籍,总结总结一下,redis实战内容: 实战前先对redis做一个大概的认识: 现在开始安装redis了... redis的安装下载地址 ht ...

  3. extjs 6.2 helloworld

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. maven实战(01)_搭建开发环境

    一 下载maven 在maven官网上可下载maven:http://maven.apache.org/download.cgi 下载好后,解压.我的解压到了:D:\maven\apache-mave ...

  5. d3可视化实战01:理解SVG元素特性

    一. SVG简介 ————————————————————————————————————————————————————————————————— SVG是一种和图像分辨率无关的矢量图形格式,它使用 ...

  6. JAVAEE——SSH项目实战01:SVN介绍、安装和使用方法

    1 学习目标 1.掌握svn服务端.svn客户端.svn eclipse插件安装方法 2.掌握svn的基本使用方法 2 svn介绍 2.1 项目管理中的版本控制问题 通常软件开发由多人协作开发,如果对 ...

  7. d3可视化实战03:神奇的superformula

    需求驱动实现 前文讲过了D3的数据驱动机制,中间所举的例子都很简单.例如那个demo里面,绑定的数据是一个简单的数组,实现的图元也仅仅是一堆用SVG画的circle.但是现实世界中我们往往会遇到复杂的 ...

  8. AngularJS 系列 学习笔记 目录篇

    目录: AngularJS 系列 01 - HelloWorld和数据绑定 AngularJS 系列 02 - 模块 (持续更新)

  9. 安装infer整个过程

    日期:2015-06-26 孟起  15:43:25 大神.. 孟起  15:43:38 我是不是照着这个安装 HelloWorld  15:45:05 直接找二进制文件安卓就行 孟起  15:46: ...

随机推荐

  1. 优化MySQL数据库性能的八大方法

    本文探讨了提高MySQL 数据库性能的思路,并从8个方面给出了具体的解决方法. 1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就 ...

  2. JXL操作Excel

    jxl是一个韩国人写的java操作excel的工具, 在开源世界中,有两套比较有影响的API可 供使用,一个是POI,一个是jExcelAPI.其中功能相对POI比较弱一点.但jExcelAPI对中文 ...

  3. js前台加密,java后台解密实现

    参考资料: JS前台加密,java后台解密实现

  4. 金融自助设备WOSA/XFS规范介绍

    wosa(全称是windows开放式系统体系结构 windows open system architecture),是微软公司提出的一种在windows操作系统下的软件架构. wosa/xfs是基于 ...

  5. HDU 3691 Nubulsa Expo(全局最小割Stoer-Wagner算法)

    Problem Description You may not hear about Nubulsa, an island country on the Pacific Ocean. Nubulsa ...

  6. Android 异步加载解决方案

    Android的Lazy Load主要体现在网络数据(图片)异步加载.数据库查询.复杂业务逻辑处理以及费时任务操作导致的异步处理等方面.在介绍Android开发过程中,异步处理这个常见的技术问题之前, ...

  7. CSS/CSS3 如何实现元素水平居中

    更新:可直接访问 [CSS/CSS3 如何实现元素水平居中] 查看效果,右键查看源代码 -------------------------------------------------分割线---- ...

  8. [Unity菜鸟] 协程Coroutine

    1.协程,即协作式程序,其思想是,一系列互相依赖的协程间依次使用CPU,每次只有一个协程工作,而其他协程处于休眠状态. unity中StartCoroutine()就是协程,协程实际上是在一个线程中, ...

  9. Introducing the Blog Module

    Introducing the Blog Module Now that we know about the basics of the zend-mvc skeleton application, ...

  10. svn项目冲突时显示无法加载项目的解决方法

    1.无法加载的项目会显示成灰色.这是右键点击编辑  打开后去掉乱字符. 2.完成后会有红色的叹号 这是右键 找到解决冲突即可 然后提交