ext入门总结
- 格式:doc
- 大小:133.00 KB
- 文档页数:10
ExtJs 学习
Author: 石恺元 datetime: 2010-11-24
一. Ext简介
ExtJS 是一种优秀的Ajax框架,可以用来开发带有华丽外观的RIAlto(富客户端)的Ajax应用,
使得我们的B/S应用更加具有活力。由于他是一种用JavaScript编写,与后台技术无关的前端Ajax
框架因此,可以把ExtJS用在.net,java,php等多种开发语言中。Ext使用做出来的东西很像桌面程序
ExtJS开始基于YUI技术,由开发人员jack Slocum 开发,通过参考Java Swing等机制来组织可
视化组件,无论从UI界面上CSS样式,数据解析上的异常处理Ext都很优秀。
要使用ExtJs,那么首先要得到ExtJx文库文件,该框架是一个开源的,可以直接从官方网站上
下载网址是 /products/js/download.php然后根据提示进入下载页面。
二. 准备工作
需要三个工具:1. ExtJs的主程序包
2.AdobeAIR 是Abode的一个支持工具
3.(必须先安装adoair然后才能装这个,ext的视API,会创建一个桌面图标,很好看的一个工具)
三. 核心包
打开ext2.3核心包有以下内容:
adaper: 负责第三方提供的底层库(包括Ext自带的底层库)映射为Ext所支持的底层库
buile : 压缩后ext全部的源码(里面分类存放).
docs : API帮助文档(这个文档需要一个adobe的一个工具)
exmaples: 提供使用ExtJs 的例子
resources: Ext UI 资源文件目录,如CSS,图片等。
source : 无压缩Ext全部的源码(里面分类存放)遵从Lesser GNU (LGPL)开源协议。
ext-all.js :压缩后ext的全部源码。
ext-all-debug.js : 无压缩ext的全部源码用于调试
ext-core.js : 压缩后Ext的核心组件,包括source/core 下的所以类
ext-core-debug.js : 无压缩Ext核心组件,包括source/core下的所有类 【注: 压缩的源码实际上就是把源码无换行,无空格,所以源程序在一行】
我们要用到的文件: 样式文件:ressources/css/ext-all.css
ext文库主要有两个:adapter/extext-base.js以及ext-all.js,其中ext-base.js表示基础包,ext-all.js表示核心库(appdaper表示配置器,也就是说可以有多种配置器也就是说用其他几个也行)。
在项目里面放的时候放三个包就可以了:
Apapter ,resources , ext-all-debug
因此,使用ExtJS框架的页面一般包括下面几句:
四. 开始燃烧的远征
1. hello world
New Document
//这里调用了浏览器的alert框(不太好看)
2. 用ext的方messageBox做一个漂亮的alert框 关于MessageBox 我们可以查看帮助
下面做一个好看的ext alert 框:
New Document
//利用Ext的MessageBox弹出一个alert框
这个就比较好看了
下面我们在来做一个可以改变大小的窗体:
win.show();
})
//显示一个好看的窗体并且可以改变他的大小
3. 用两个一个遮住另一个
4. s
五. Extde 组成
Ext由一系列的类库组成,一旦也米昂成功加载了ExtJs库后,我们就能在页面中通过javascript
用ExtJS的类及控件来实现需要的功能.ExtJS的类库由以下几部分组成:(1.底层API(core), 2.控件(widgets), 3.实用工具 Utils )
1. 底层API(core)
底层API(core):底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层api的基础上,底层api位于源代码目录的core子目录中,包括DomHelper.js、Element.js等文件
2. 控件(widgets)
控件是指可以直接在页面中创建的可视化组件,比如面板、选项板(面板上再放面板)、表格、树、窗口、菜单、工具栏、按钮等等,在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI(用户界面)
3. 实用工具Utils
Ext提供了很多的实用工具,可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax请求、Cookie管理、CSS管理等扩展等功能
六. Ext的组件体系
1. 组件的构成
组件大致可以分成三大类,即基本组件、工具栏组件、表单及元素组件
基本组件:
xtype Class
------------- ------------------
box Ext.BoxComponent 具有边框属性的组件
button Ext.Button 按钮
colorpalette Ext.ColorPalette 调色板
component ponent 组件
container Ext.Container 容器
cycle Ext.CycleButton
dataview Ext.DataView 数据显示视图
datepicker Ext.DatePicker 日期选择面板
editor Ext.Editor 编辑器
editorgrid Ext.grid.EditorGridPanel 可编辑的表格
grid Ext.grid.GridPanel 表格
paging Ext.PagingToolbar 工具栏中的间隔
panel Ext.Panel 面板
progress Ext.ProgressBar 进度条
splitbutton Ext.SplitButton 可分裂的按钮
tabpanel Ext.TabPanel 选项面板
treepanel Ext.tree.TreePanel 树
viewport Ext.ViewPort 视图
window Ext.Window 窗口
工具栏组件
toolbar Ext.Toolbar 工具栏
tbbutton Ext.Toolbar.Button 按钮
tbfill Ext.Toolbar.Fill 文件
tbitem Ext.Toolbar.Item 工具条项目
tbseparator Ext.Toolbar.Separator 工具栏分隔符
tbspacer Ext.Toolbar.Spacer 工具栏空白
tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮