ExtJS介绍与Hello World

原创 2015年11月21日 16:22:20

          ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。
ExtJS的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者,并为开发者屏蔽了大量跨浏览器方面的处理。相对来说,ExtJS要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

【转载使用,请注明出处:http://blog.csdn.net/mahoking


    下面我们来演示ExtJS第一个程序Hello World的创建过程。本例使用的ExtJS版本为4.2。下载地址:http://cdn.sencha.com/ext/gpl/ext-4.2.1-gpl.zip。下载完成后就得到了ExtJS 的源代码、API文档,以及示例内容。


 
第一步:通过Eclipse或者MyEclipse创建Web Application。在WebRoot目录下创建分别创建文件夹extjs与js,并创建一个HTML页面index.html。


 
第二步:添加所需要的ExtJS的js等文件。添加ExtJS的全部文件显然不太合理,本例只使用需要的一些文件,简化后为如下。



第三步:编辑index.html文件。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- 引入ExtJS的样式文件 -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<!-- 引入ExtJS的引导程序js文件 -->
<script type="text/javascript" src="extjs/bootstrap.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
	function init(){
		Ext.MessageBox.alert("ExtJS 4.2","Hello ExtJS4.2's World!");
	}
	Ext.onReady(init);
</script>
<title>ExtJS4.2</title>
</head>
<body>
</body>
</html>

注:
1、locale目录中的 ext-lang-zh_CN.js文件,这个文件是我们汉语的本地化文件,我们只需要添加该文件的引用,就能够轻松的实现ExtJS的本地化。
2、bootstrap.js工作方式
将bootstrap.js引入页面,并没有直接引用ExtJS的脚本文件,而是通过bootstrap在启动的时候动态的选择要将哪些extjs脚本添加到页面中。
bootstrap.js 会自动为我们添加ExtJS 的引用,那么它是怎么确定要引用哪个ExtJS文件的呢?我们的目录中有分别有三个文件:
ext-all-debug.js:用于调试时引用
ext-all-dev.js:用于开发时引用
ext-all.js:在发布时引用
所幸我们有bootstrap.js文件的源代码,打开看一下源代码,在注释部分有文件引用的说明:

/**
 * Load the library located at the same path with this file
 *
 * Will automatically load ext-all-dev.js if any of these conditions is true:
 * - Current hostname is localhost
 * - Current hostname is an IP v4 address
 * - Current protocol is "file:"
 *
 * Will load ext-all.js (minified) otherwise
 */

这段注释的大概意思是:

/**
 * 加载本文件相同路径中的库
 *
 * 满足以下条件将自动加载 ext-all-dev.js:
 * - 当前主机名是 localhost
 * - 当前主机名是 IP v4 地址
 * - 当前协议是 "file:"
 *
 * 其它情况下将加载 ext-all.js (minified)
 */

第四步:将该web工程部署到Tomcat等服务器中,访问查看效果。




参考信息:

1、 http://baike.baidu.com/link?url=nKseHUkgbiL1i8_ylwoWFhRPbfVLCW9d7LEcOBzTEthSN8_zDwQU910ahctx5sMv2SLseIuRZ9ONNu7_onuvkK
2、 http://www.qeefee.com/extjs-course-2-bootstrap-js


【转载使用,请注明出处:http://blog.csdn.net/mahoking


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

ExtJS 4.x 第一搞,经典的Hello World !!!

一直等着ExtJS 4.1才来,我才愿意用4版,原因: 4和3有很大的区别, 4.1之前怀疑,有bug,才上来的东东,难免的官方的文档,和大家讨论实践的文档,出于项目的安全,这是必须的,不能...

ExtJS4.2 - 从 Hello World 到 自定义组件 - 01

ExtJS4.2 - 从 Hello World 到 自定义组件 - 01 经验、概述、项目搭建、国际化、HelloWorld、布局                         ...

extjs 6.2 熟悉开发环境 hello world

1.下载extjs 6.2 并解压。 2.发布extjs项目。 将ext-6.2.0文件夹拷贝到tomcate的webapp目录下启动tomcate,或者拷贝到IIS发布。 3.本地编写hel...
  • xiaozaq
  • xiaozaq
  • 2017年03月01日 12:26
  • 956

ExtJS4.2 - 从 Hello World 到 自定义组件 -01

ExtJS4.2 - 从 Hello World 到 自定义组件 - 01 经验、概述、项目搭建、国际化、HelloWorld、布局                 ——少走弯路,简单才是王道   ...
  • csnewdn
  • csnewdn
  • 2016年10月21日 10:19
  • 360

ExtJS入门之Hello World

本文记录的是Extjs入门的第一个程序:Hello World,在浏览器中访问我们的程序,会出现一个提示框,如下图所示: 该提示框可以在浏览器内移动,点击OK按钮或右上角的按钮,提示框关闭,下面我...

extjs 4.2 学习笔记(一) 从“Hello World”开始

1. 环境的搭建 1.1 安装eclipse 2.2 安装spket 2. 框架下载 下载ext-4.2.1.883版本的extjs框架 3. 参考extjs 权威指南学习 3.1 首先将必...
  • xiaozaq
  • xiaozaq
  • 2015年11月11日 09:29
  • 304

ExtJS4.2 - 从 Hello World 到 自定义组件 -01 (为爱女伊兰奋斗)

ExtJS4.2 - 从 Hello World 到 自定义组件 - 01 经验、概述、项目搭建、国际化、HelloWorld、布局                 —— 为爱女伊兰而奋斗    ...
  • nimmy
  • nimmy
  • 2013年06月18日 17:17
  • 16538

ADO_NET介绍及经典Hello World

  • 2008年10月15日 14:47
  • 23KB
  • 下载

ExtJs 4入门 准备Extjs环境准备+ hello world程序 - 快乐的牛?

准备开发环境Eclipse for javascript web developer 3.7 indigoapache 2.2extjs 4.0.7 gplExtjs解压到本地,目录结构如下图所示: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ExtJS介绍与Hello World
举报原因:
原因补充:

(最多只允许输入30个字)