转载:http://www.easyjf.com/
ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用,下面是一些使用ExtJS开发的应用程序截图:

(wlr的blog应用)


(ExtJS的表格控件)

(不同主题的ExtJS弹出框效果)
ExtJS是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
ExtJs最开始基于YUI技术,由开发人员Jack Slocum开发,通过参考Java Swing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。
获得ExtJS
要使用ExtJS,那么首先要得到ExtJS库文件,该框架是一个开源的,可以直接从官方网站下载,网址http://extjs.com/download,进入下载页面可以看到大致如图xxx所示的内容,可以选择选择1.1或2.0版本,本教程使用的2.0版本。

图1-1 ExtJs不同版本下载选择页面
单击上图中的【Download ext-2.0.zip】超链接进行下载,把下载得到的ZIP压缩文件解压缩到【D:\ExtCode】目录下,可以得到如如图1-2所示的内容。

图1-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下的所有类。
应用ExtJS
应用extjs需要在页面中引入extjs的样式及extjs库文件,样式文件为resources/css/ext-all.css,extjs的js库文件主要包含两个,adapter/ext/ext-base.js及ext-all.js,其中ext-base.js表示框架基础库,ext- all.js是extjs的核心库。adapter表示适配器,也就是说可以有多种适配器,因此,可以把adapter/ext/ext-base.js 换成adapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototype- adapter.js等。
因此,要使用ExtJS框架的页面中一般包括下面几句:
在ExtJS库文件及页面内容加载完后,ExtJS会执行Ext.onReady中指定的函数,因此可以用,一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的,使用ExtJS应用程序的代码大致如下:
fn也可以写成一个匿名函数的形式,因此上面的代码可以改成下面的形式:
ExtJS版的Hello
下面我们写一个最简单的ExtJS应用,在hello.html文件中输入下面的代码:

图1-11 hello.html页面效果
进一步,我们可以在页面上显示一个窗口,代码如下:
在浏览hello.html,即可得在屏幕上显示一个窗口,如图xxx所示。
