前言

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. BigDecimal 详细解析

    参加工作之后发现公司项目的数据库有关数值的字段类型,很少是之前常用的float和double, 而是一个没有接触过的decimal,在Java中表示的类型为BigDecimal, 而在业务中常常有关B ...

  2. Logging with Debug And Trace (一)

    对于一个应用程序而言,Log 必不可少. 在.net 里面,最简单的方式就是用Console 来输出 信息了,例如下面的例子: public class Program { public static ...

  3. NSURLCache

    属性介绍: //获取当前应用的缓存管理对象 + (NSURLCache *)sharedURLCache; //设置自定义的NSURLCache作为应用缓存管理对象 + (void)setShared ...

  4. 使用zabbix邮件发送报表

    简介 首先我们来看下图片的url (右击screens中随便一张图片,选复制图片地址) http://zabbix.xxx.com/chart2.php?graphid=524&screeni ...

  5. gitlab+gerrit+jenkins持续集成框架

    1.持续集成之gitlab+gerrit+jenkins 1.1. GitLab 1.1.1. 简介 GitLab 是一个使用使用Ruby on Rails搭建的,用于仓库管理系统的开源项目.使用Gi ...

  6. Eclipse安装jad插件进行反编译

    1.下载的eclipse是免安装的工具: 打开eclipse后在windows-preference下没有找到jadClipse,希望显示这个插件: 方法一:Help-Eclipse Marketpl ...

  7. MYSQL 查询出最大/最小值所在的记录

    基本上都知道用MAX()/MIN()来求出所需的最大/最小值,但是只能查出那个最值的字段,而想查出整条记录或是对应的其他值却不行(SELECT MAX(grade), name FROM test;- ...

  8. OpenGl的glMatrixMode()函数理解

    glMatrixMode()函数的参数,这个函数其实就是对接下来要做什么进行一下声明,也就是在要做下一步之前告诉计算机我要对“什么”进行操作了,这个“什么”在glMatrixMode的“()”里的选项 ...

  9. 移动设备和SharePoint 2013 - 第3部分:推送通知

    博客地址:http://blog.csdn.net/foxdave 原文地址 在该系列文章中,作者展示了SharePoint 2013最显著的新功能概观--对移动设备的支持. 该系列文章: 移动设备和 ...

  10. Mac命令行语法高亮设置

    mkdir -p ~/.vim/autoloadcurl -fLo ~/.vim/autoload/plug.vim https://raw.githubusercontent.com/junegun ...