ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用.ExtJS主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术.
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库文件,样式文件为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框架的页面中一般包括下面几句:
- <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>
<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>
ExtJS由一系列的类库组成,ExtJS的类库包括以下部分:
- 底层API(core):底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层api的基础上,底层api位于源代码目录的core子目录中,包括DomHelper.js、Element.js等文件.
- 控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等,在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets子目录中.
- 实用工具Utils:Ext提供了很多的实用工具,可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax请求、Cookie管理、CSS管理等扩展等功能.
Ext组件是由 Component类定义,每一种组件都有一个指定的xtype属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。组件大致可以分成三大类,即基本组件、工具栏组件、表单及元素组件。
组件可以直接通过new 关键子来创建,比如控件一个窗口,使用new
Ext.Window(),创建一个表格则使用new
Ext.GridPanel()。当然,除了一些普通的组件以外,一般都会在构造函数中通过传递构造参数来创建组件。组件的构造函数中一般都可以包含一个对象,这个对象包含创建组件所需要的配置属性及值,组件根据构造函数中的参数属性值来初始化组件。所有的组件都继承自
Ext.Component.
Viewport不需要再指定renderTo,而我们也看到Viewport确实填充了整个浏览器显示区域,并会随着浏览器显示区域大小的改变而改变。
Viewport主要用于应用程序的主界面,可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport上常用的布局有fit、border等,当然在需要的时候其它布局也会常用。
普通对话框一般包括四个参数,比如confirm的方法签名为confirm ( String title, String msg, [Function fn], [Object scope] ) ,参数title表示对话框的标题,参数msg表示对话框中的提示信息,这两个参数是必须的;可选的参数fn表示当关闭对话框后执行的回调函数,参数 scope表示回调函数的执行作用域。回调函数可以包含两个参数,即button与text,button表示点击的按钮,text表示对话框中有活动输 入选项时输入的文本内容。我们可以在回调函数中通过button参数来判断用户作了什么什么选择,可以通过text来读取在对话框中输入的内容。
ExtJS2.0一共包含十种布局,常用的布局有border、column、fit、form、card、tabel等布局.
Form布局由类
Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。实际应用中,
Ext.form.FormPanel这个类默认布局使用的是Form布局,而且FormPanel还会创建与 <form> 标签相关的组件,因此一般情况下我们直接使用FormPanel即可。
ExtJS中的表格功能非常强大,包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类
Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store。表格的列信息由类
Ext.grid.ColumnModel定义、而表格的数据存储器由
Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。