Extjs总结

ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的
前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
ExtJs 最开始基于YUI 技术，

无论从UI 界面上CSS 样式的应用，到数据解析上的异常处理，
都可算是一款不可多得的JavaScript 客户端技术的精品。


extjs 的js 库文件主要包含两个，adapter/ext/ext-base.js 及ext-all.js，其中ext-base.js
表示框架基础库，ext-all.js 是extjs 的核心库

在ExtJS 库文件及页面内容加载完后，ExtJS 会执行Ext.onReady 中指定的函数，下每一个用户的ExtJS 应用都是从Ext.onReady 开始的


一旦页面成功加载了ExtJS 库后，我们就可以在页面中通
过javascript 调用ExtJS 的类及控件来实现需要的功能

底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询
器等基础的功能。其它控件都是建立在这些底层api 的基础上，


Ext 组件是由Component 类定义，每一种组件都有
一个指定的xtype 属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组
件。


对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过在需要
父组件的构造函数中，通过给属性items 传递数组方式实现构造

var panel=new Ext.TabPanel({width:300,height:200,items:[ {title:"面板1",height:30},{title:"面板
2",height:30},{title:"面板3",height:30}]});panel.render("hello");
ExtJS 实用简明教程[收集整理:龚辟愚、QQ 群：19274175]
- 13 -
这里包括三个面板。上面的代码与下面的代码等价：
var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel( {title:"面板1",height:30}),new
Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]});panel.render("hello");
前者不但省略掉了new Ext.Panel 这个构造函数，最重要前者只有在初始化TabPanel 的
时候，才会创建子面板，而第二种方式则在程序一开始就会创建子面板。也就是说，前者实
现的延迟加载。

学习及使用ExtJS，
其中最关键的是掌握ExtJS 中的各个组件的配置属性及具体的含义，

。事件统一由
Ext.EventManager 对象管理，与浏览器W3C 标准事件对象Event 相对应，Ext 封装了一个
Ext.EventObject 事件对象。支持事件处理的类(或接口)为Ext.util.Observable，凡是继承该类
的组件或类都支持往对象中添加事件处理及响应功能。


，ExtJS 还支持事件延迟处理或事件处理缓存等功能，比如下面的代码


面板Panel 是ExtJS 控件的基础，很高级控件都是在面板的基础上扩展的，还有其它大
多数控件也都直接或间接有关系。应用程序的界面一般情况下是由一个一个的面板通过不同
组织方式形成。


面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、
面板主区域几个部分组件

VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，
并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。

Viewport 主要用于应用程序的主界面


ExtJS 中窗口是由Ext.Window 类定义，该类继承自Panel，因此窗口其实是一种特殊的
面板Panel。


窗口是分组进行管理的，可以对一组窗口进行操作，默认情况下的窗口都在默认的组
Ext.WindowMgr 中


谓布局就是指容器组件中子元素的分布、排列组合方式


ExtJS 的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类
ExtJS2.0 一共包含十种布局，常用的布局有border、column、fit、form、card、tabel
等布局

suo谓布局就是指容器组件中子元素的分布、排列组合方式

ExtJS 的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。

ExtJS2.0 一共包含十种布局，常用的布局有border、column、fit、form、card、tabel
等布局

     Border区域布局 该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示

     Column 列布局由Ext.layout.ColumnLayout 类定义，名称为column。。columnWidth 表示使用百分比的形式指定列宽度，而width 则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。

     Fit 布局，因此子将自动填满整个父容器。

     Form 布局由类Ext.layout.FormLayout 定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用

     Ext.form.FormPanel 这个类默认布局使用的是Form 布局，而且FormPanel还会创建与<form> 标签相关的组件，因此一般情况下我们直接使用FormPanel 即可。

    Table 布局由类Ext.layout.TableLayout 定义，名称为table，该布局负责把容器中的子元素按照类似普通html 标签


ExtJS 中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能

表格由类Ext.grid.GridPanel 定义，继承自Panel，其xtype 为grid。ExtJS 中，表格Grid必须包含列定义信息， 并指定表格的数据存储器Store 。表格的列信息由类
Ext.grid.ColumnModel 定义、而表格的数据存储器由Ext.data.Store 定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore 等。

Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],//用来定义表格中要显示的数据，这是一个[][]二维数
组；

[2, 'jfox', 'huihoo','www.huihoo.org'],
[3, 'jdon', 'jdon','www.jdon.com'],
[4, 'springside', 'springside','www.springside.org.cn'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});

“var store=…”用来创建一个数据存储，这是GridPanel 需要使用配置属性，数据
存储器Store 负责把各种各样的数据（如二维数组、JSon 对象数组、xml 文本）等转换成ExtJS
的数据记录集Record

var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国Java开源产品及团队",
height:150,
width:600,
columns:[{header:"项目名称",dataIndex:"name"},
         {header:"开发团队",dataIndex:"organization"},
         {header:"网址",dataIndex:"homepage"}],
store:store,
autoExpandColumn:2
});
});

第三行“var grid
= new Ext.grid.GridPanel(…)”负责创建一个表格，表格包含的列由columns 配置属性来描述，
columns 是一数组，每一行数据元素描述表格的一列信息，表格的列信息包含列头显示文本
(header)、列对应的记录集字段(dataIndex)、列是否可排序(sorable)、列的渲染函数(renderer)、
宽度(width)、格式化信息(format)等，在上面的列子中只用到了header 及dataIndex。


另外，每一列的数据渲染方式还可以自己定义，比如上面的表格中，我们希望用户在表格中点击网址则直接打开这些开源团队的网站，也就是需要给网址这一列添加上超级连接。
下面的代码实现这个功能：

格EditorGridPanel
可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS 中的可编辑表格由类Ext.grid.EditorGridPanel 表示，xtype 为editorgrid。使用EditorGridPanel 与使用普通的
那么如何保存编辑后的数据呢？答案是直接使用afteredit 事件。
        afterEdit:function(obj){
var r=obj.record;
var id=r.get("id");
var name=r.get("name");
var c=this.record2obj(r);
var tree=this.tree;
var node=tree.getSelectionModel().getSelectedNode();
if(node && node.id!="root")c.parentId=node.id;
if(id=="-1" && name!=""){
topicCategoryService.addTopicCategory(c,function(id){
if(id)r.set("id",id);
if(!node)node=tree.root;
node.appendChild(new Ext.tree.TreeNode({
id:id,
text:c.name,
leaf:true
}));
node.getUI().removeClass('x-tree-node-leaf');
node.getUI().addClass('x-tree-node-expanded');
node.expand();
});
}
else if(name!="")
{
topicCategoryService.updateTopicCategory(r.get("id"),c,function(ret){
if(ret)tree.getNodeById(r.get("id")).setText(c.name);
});
}
}

与服务器交互
             ExtJS 使用Ajax 方式提供了一套与服务器交互的机制，也就是可以不用刷新页面，就可以访问服务器的程序进行数据读取或数据保
存等操作。为Sote 组件接受一个参数url，如果设置url，则ExtJS 会创建一个与服务器交互的
Ext.data.HttpProxy 对象，该对象通过指定的Connection 或Ext.Ajax.request 来向服务端发送
请求，从而可以读取到服务器端的数据。
经验表明，服务器端产生JSon 数据是一种非常不错的选择，也就是说假如服务器的
url“student.ejf?cmd=list”产生下面的JSON 数据输出：

数据存储Stroe

，ExtJS 中有一个名为Record 的类，表格等控件中使用的数据是存放在
Record 对象中，一个Record 可以理解为关系数据表中的一行，也可以称为记录。Record 对
象中即包含了记录（行中各列）的定义信息（也就是该记录包含哪些字段，每一个字段的数
据类型等），同时又包含了记录具体的数据信息（也就是各个字段的值）。
    

Store Store 可以理解为数据存储器，可以理解为客户端的小型数据表，提供缓存等功能。
数据存储器由Ext.data.Store 类定义，一个完整的数据存储器要知道数据源(DataProxy)
及数据解析方式(DataReader)才能工作，在Ext.data.Store 类中数据源由proxy 配置属性定义、
数据解析（读取）器由reader 配置属性定义


DataReader 表示数据读取器，也就是数据解析器，其负责把从服务器或者内存数组、xml
文档中获得的杂乱信息转换成ExtJS 中的记录集Record 数据对象，并存储到Store 里面的记
录集数组中。
ExtJS 中提供了读取二维数组、JSon 数据及Xml 文档的三种数据解析器，分别用于把内存
中的二级数组、JSON 格式的数据及XML 文档信息解析成记录集


1
）ArrayReader
Ext.data.ArrayReader－数组解析器，用于读取二维数组中的信息，并转换成记录集Record
对象。

Ext.data.JsonReader－Json 数据解析器，用于读取JSON 格式的数据信息，并转换成记
录集Record 对象

Ext.data.XmlReader－XML 文档数据解析器，用于把XML 文档数据转换成记录集Record
对象


数据代理（源）基类由Ext.data.DataProxy 定义，在DataProxy
的基础，ExtJS 提供了Ext.data.MemoryProxy、Ext.data.HttpProxy、Ext.data.ScriptTagProxy
等三个分别用于从客户端内存数据、Ajax 读取服务器端的数据及从跨域服务器中读取数据
等三种实现。


直接从从客户端的内存数组中读取数据，此时就可以直接使用Ext.data.MemoryProxy

从服务器端加载的数据直接使用Ext.data.HttpProxy

HttpProxy 直接使用Ext.Ajax 加载服务器的数据，由于这种请求是不能
跨域的，所以要要读取跨域服务器中的数据时就需要使用到Ext.data.ScriptTagProxy。

TreePanel
。ExtJS 中提供了现存的树控件，通过这些控件可以在B/S 应用中快速开发出包含树结构信息的应用。

树控件由Ext.tree.TreePanel 类定义，控件的名称为treepanel，TreePanel 类继承自Panel
面板

Ext.onReady(function(){

var root=new Ext.tree.TreeNode({
第一句使用new Ext.tree.TreeNode 类来创建一个树节点


id:"root",
text:"树的根"});
root.appendChild(new Ext.tree.TreeNode({
第二句使用树节点的
root 的appendChild 方法来往该节点中加入一个子节点
id:"c1",
text:"子节点"
}));


var tree=new Ext.tree.TreePanel({
，最后直接使用new Ext.tree.TreePanel来创建一个树面板，
renderTo:"hello",
root:root,
width:100
});
});


树的节点信息。ExtJS 的树控件提供了对这种功能的支持，你只需要在创建树控件的时
候，通过给树指定一个节点加载器，可以用来从服务器端动态加载树的节点信息
当然上面的程序是一次性加载完了树的所有节点信息，我们也可以实现让每一个节点都
支持动态加载的树，只需要在通过服务器请求数据的时候，每次服务器端返回的数据只只包
含子节点，而不用把孙子节点也返回即可当然上面的程序是一次性加载完了树的所有节点信息，我们也可以实现让每一个节点都
支持动态加载的树，只需要在通过服务器请求数据的时候，每次服务器端返回的数据只只包
含子节点，而不用把孙子节点也返回即可

对于ExtJS 中的树来说，树加载器TreeLoader 是一个比较关键的部件，树加载器由
Ext.tree.TreeLoader 类定义，只有AsyncTreeNode 才会使用TreeLoader。