1.ExtJS简介
ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用.ExtJS主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。说白了,就是个可引用的写好了的JS代码,好比JQuery等一样。
2.ExtJS环境配置
- 首先,下载一个ExtJS包。
解压之后,以我的2.2版本为例。下载地址。
ExtJS
发布包目录:
-
adapter :负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库。
-
build : 压缩后的ext全部源码(里面分类存放)。
-
docs : API帮助文档。
-
exmaples :提供使用ExtJs技术做出的小实例。
-
resources :Ext UI资源文件目录,如CSS、图片文件都存放在这里面。
-
source : 无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU (LGPL) 开源的协议。
-
Ext-all.js :压缩后的Ext全部源码。
-
ext-all-debug.js :无压缩的Ext全部的源码(用于调试)。
-
ext-core.js :压缩后的Ext的核心组件,包括sources/core下的所有类。
-
ext-core-debug.js :无压缩Ext的核心组件,包括sources/core下的所有类。
-
其次,下载API文档。不用太多介绍了,里面函数啊,方法啊。什么都有。只是英文的,貌似有繁体中文版本。大家找找吧。或者考虑在线版本的文档。
-
测试环境
在所使用的页面中引入如下代码:
Code
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="extjs/ext-all.js">
</script>3.简单应用测试
没办法,俗一把。从hello world 开始。
- 普通版Hello world
以下标注为***的要根据自己的实际路径设定。不用废话了。
Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="***/resources/css/ext-all.css" />
<script type="text/javascript" src="***/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="***/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
alert('Hello World!');
});
</script>
</head>
<body>
</body>
</html>如果出现弹出窗口,则为引用成功。
-
豪华版Hello world
改写函数。使用空间Message Box 消息框。
Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="***/resources/css/ext-all.css" />
<script type="text/javascript" src="***/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="***/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert('显示的消息', 'Hello World !! ');
});
</script>
</head>
<body>
</body>
</html>效果如下:
效果不错,还可以拖拽。具体为什么使用Message box 和它到底能实现什么功能。我会在Message Box 中,详细举例说明API。以上的两个例子证明了,环境简单的配置成功了.
² 参考资料:
ü JavaEye
ü ExtJS API
ü 谦虚天下
-