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

时间: 2024-10-10 08:30:52

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

Webpack + React 开发 01 HelloWorld

1.项目依赖 安装所需要依赖的其它第三方开源库,项目依赖如下: "dependencies": { "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0&quo

SSH+ExtJS实战开发视频教程

基于S2SH+ExtJS4+Oracle9i技术实战开发电子商业汇票系统 课程分类:Java+ExtJs 适合人群:中级 课时数量:41课时 用到技术:Hibernate.Struts.Spring.Extjs 涉及项目:电子商业汇票系统 咨询QQ:1840215592 一.电子商业汇票系统简介: 是指出票人依托电子商业汇票系统,以数据电文形式制作的,委托付款人在指定日期无条件支付确定的金额给收款人或者持票人的票据.即实现商业汇票业务操作完全电子化,在业务操作的过程中,没有实物票据的流转,全部是

extjs 6.2 helloworld

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <!-

ExtJS视频教程 ExtJS实战教程完整版30讲

本教程由齐学网整理提供,更多好资源尽在齐学网! ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架.        其功能丰富,无人能出其右.        无论是界面之美,还是功能之强,ext的表格控件都高居榜首.单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现.自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能.再加上可编辑g

Robotlegs教程01 -- HelloWorld

最近在学Robotlegs,在百度和谷歌里搜了几天,也没找到基本有价值的书(文章.demo...),更别说是纯AS3的.没办法,自己动手,丰衣足食吧(毕竟学的不精,若有错误,望斧正!) 1.先建立一个新的AS3Project 2.将Robotlegs的robotlegs-framework-v1.5.2.swc.SwiftSuspenders-v1.6.0.swc放到lib下,导入到库 3.在Main里new一个HelloWorldContext package { import flash.d

【SSH项目实战01】整合Struts2、Hibernate4.3和Spring4.2

今天开始,跟进一个网上商城的项目,首先从搭建环境开始,一步步整合S2SH.这篇博文主要总结一下如何整合Struts2.Hibernate4.3和Spring4.2. 整合三大框架得先从搭建各部分环境开始,也就是说首先得把Spring,Hibernate和Struts2的环境搭建好,确保它们没有问题了,再做整合.这篇博文遵从的顺序是:先搭建Spring环境-->然后搭建Hibernate环境--> 整合Spring和Hibernate --> 搭建Struts2环境 --> 整合Sp

Springmvc系列01 Helloworld

0.springmvc请求流程图 1.使用的jia包及要写的配置文件如图 2.web.xml 配置前端控制器 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchem

iOS实战01

去年放假之前大概完成了新浪微博项目,到现在也忘得差不多了,打算在重新写一遍.之前的一些笔记在新浪的博客SleenXiu,在这主要是把新浪微博以随笔的形式写在这,方便以后的复习. 先看看之前主要完成的几个点,秒拍视频连接:http://video.weibo.com/show?fid=1034:32ed06b90b1bba7ba25cc546a06fa949 今天开始重新写一遍,在这记下来. 经典框架的搭建,所谓经典框架就是最底层为UITabBarController,管理几个UINavigati

spark SQL编程动手实战-01

首先创建SparkContext上下文: 接着引入隐身转换,用于把RDD转成SchemaRDD: 接下来定义一个case class 来用于描述和存储SQL表中的每一行数据: 接下来要加载数据,这里的测试数据是user.txt文件: 我们创建好use.txt增加内容并上传到hdfs中: web控制台查询: hdfs命令查询: 加载数据: 验证数据是否加载成功: 注册成为user的table: 此刻user还是一个MappedRDD: 执行age 大于13 小于19的SQL查询: 此刻的teena