1.EXT的官方网址、最新版本、下载地址
官方网址:http://extjs.com/;
最新版本:Ext JS 3.0;
下载地址:http://extjs.com/products/extjs/download.php;
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 下的所有类。
3.应用EXT
应用extjs 需要在页面中引入extjs 的样式及extjs 库文件,样式文件为resources/css/extall.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 应用程序的代码大致如下:
4.ExtJS版的HelloWorld
下面我们写一个最简单的ExtJS 应用,在hello.html 文件中输入下面的代码,然后在浏览器中打开hello.html,在浏览器显示一个Hello World窗面。
5.Ext类库简介
ExtJS 由一系列的类库组成,一旦页面成功加载了ExtJS 库后,我们就可以在页面中通过javascript 调用ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由以下几部分组成:
底层API(core):底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。其它控件都是建立在这些底层api 的基础上,底层api 位于源代码目录的core 子目录中,包括DomHelper.js、Element.js 等文件。
控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等,在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中,包含chart、form、grid等文件夹和Action.js、BoxComponent.js、Button.js、ButtonGroup等文件。
实用工具Utils:Ext 提供了很多的实用工具,可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能,包括ClickRepeater.js、Cookies.js、CSS.js、Date.js等文件。
6.EXT组件
Ext 组件是由Component 类定义,每一种组件都有一个指定的xtype 属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。ExtJS 中的组件体系由下图所示:
组件大致可以分成三大类,即基本组件、工具栏组件、表单及元素组件。基本组件有:box、Button、colorpalette、component、container、cycle、dataview、datepicker、editor、editorgrid、grid、paging、panel、progress、splitbutton、tabpanel、treepanel、viewport、window,工具栏组件有:toolbar、tbbutton、tbfill、tbitem、tbseparator、tbspacer、tbsplit、tbtext表单及字段元素组件有:form、checkbox、combo、datefield、field、fieldset、hidden、htmleditor、numberfield、radio、textarea、textfield、timefield、trigger。
6.1 组件的使用
组件可以直接通过new 关键子来创建。比如创建一个窗口使用new Ext.Window(),创建一个表格则使用new Ext.GridPanel()。当然,除了一些普通的组件以外,一般都会在构造函数中通过传递构造参数来创建组件。组件的构造函数中一般都可以包含一个对象,这个对象包含创建组件时所需的配置属性及值,组件根据构造函数中的参数属性值来初始化组件。如下例:
可以省略变量obj,直接写成如下的形式:
render 方法的参数指的是页面上的div 元素的id。也可以直接在构造参数中通过renderTo属性设置render 方法的值,如下例:
容器中的子元素组件都支持以延迟加载的方式创建,可通过给容器的构造函数的items 属性传递数组的方式实现该功能。如下例:
上例创建三个面板功能如不需以延迟加载的方式创建,可以在程序一开始就创建子面板方式实现,如下例:
6.2 组件的配置属性
在ExtJS 中,除一些特殊的组件或类以外,所有的组件都可以在初始化构造函数时使用一个包含属性名称及值的对象来配置组件的属性。如以下代码配置一个面板:
如下例配置一个按钮属性:
所有的组件都继承自Ext.Component,每一个组件除了继承基类中的配置属性以外,还会根据需要增加自己的配置属性,另外子类中有的时候还会把父类的一些配置属性的含义及用途重新定义。学习及使用ExtJS,其中最关键的是掌握ExtJS 中的各个组件的配置属性及具体的含义,这些配置属性在下载下,这些配置属性在下载下来的ExtJS 源码文档中都有详细的说明,可以通过这个文档详细了解每一个组件的特性。
6.3 EXTJS组件的事件
ExtJS 提供了一整套强大的事件处理机制,通过这些事件处理机制来响应用户的动作、监控控件状态变化、更新控件视图信息、与服务器进行交互等等。事件统一由Ext.EventManager 对象管理,与浏览器W3C 标准事件对象Event 相对应,Ext 封装了一个Ext.EventObject 事件对象。支持事件处理的类(或接口)为Ext.util.Observable,凡是继承该类的组件或类都支持往对象中添加事件处理及响应功能。如下例,Ext.get("btnAlert")得到一个与页面中按钮btnAlert 关联的Ext.Element 对象,可以直接调用该对象上的addListener 方法来给对象添加事件。在调用addListener方法的代码中,第一个参数表示事件名称,第二个参数表示事件处理器或整个响应函数。
ExtJS 支持事件队列,可以往对象的某一个事件中添加多个事件响应函数,看下面的代码:
ExtJS 还支持事件延迟处理或事件处理缓存等功能,比如下面的代码: