第三章 Ext框架基础及核心简介
3.1 Ext类库简介
![]()
底层API（core）： 底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询
器等基础的功能。其它控件都是建立在这些底层api 的基础上。
| CompositeElement.js DomHelper.js DomQuery.js Element.js EvenManager.js Ext.js Fx.js Template.js UpdateManager.js |
控件(widgets): 控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、
表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控
件来实现友好、交互性强的应用程序的UI。
| //form //grid //layout //menu //tips //tree Action.js BoxComponent.js Button.js ColorPalette.js Component.js ComponentMgr.js Container.js CycleButton.js DataView.js DatePicker.js Editor.js Layer.js LoadMask.js MessageBox.js PagingToolbar.js Panel.js PanelDD.js ProgressBar.js Resizable.js Shadow.js SplitBar.js SplitButton.js TabPanel.js Toolbar.js Viewport.js Window.js WindowManager.js |
实用工具（Utils）: Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON
数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功
能。
| ClickRepeater.js CSS.js Date.js DelayedTask.js Format.js JSON.js KeyMap.js KeyNav.js MixedCollection.js Observable.js TaskMgr.js TextMetrics.js XTemplate.js |
3.2 Ext的组件
大致可以分为三大类，即 基本组件、工具栏组件、表单及元素组件。
基本组件：
| box | Ext.BoxComponent | 具有边框属性的组件 |
| Button | Ext.Button | 按钮 |
| colorpalette | Ext.ColorPalette | 调色板 |
| component | Ext.Component | 组件 |
| 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 | 窗口 |
工具栏组件：
| toobar | 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 | 工具栏分隔按钮 |
| tbtext | Ext.Toolbar.TextItem | 工具栏文本项 |
表单及字段组件：
| form | Ext.FormPanel | Form面板 |
| checkbox | Ext.form.Checkbox | checkbox录入 |
| combo | Ext.form.ComboBox | combo录入框 |
| datefield | Ext.form.DateField | 日期选择项 |
| field | Ext.form.Field | 表单字段 |
| fieldset | Ext.form.FieldSet | 表单字段组 |
| hidden | Ext.form.Hidden | 表单隐藏项 |
| htmleditor | Ext.form.HtmlEditor | html编辑器 |
| radio | Ext.form.Radio | 单选按钮 |
| textarea | Ext.form.TextArea | 区域文本框 |
| textfield | Ext.form.TextField | 表单文本框 |
| timefield | Ext.form.TimeField | 时间录入项 |
| trigger | Ext.form.TriggerField | 触发录入项 |
3.3 组件的使用
组件可以直接通过new 关键子来创建，比如控件一个窗口，使用new Ext.Window()， 创建一个表格则使用new Ext.GridPanel()。当然，除了一些普通的组件以外，一般都会在构 造函数中通过传递构造参数来创建组件。
组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性 及值，组件根据构造函数中的参数属性值来初始化组件。比如下面的例子：
|
var obj = {title:"hello",width:300,height:200,html:"Hello World"};
var panel = new Ext.Panel(obj);
panel.render("hello");
|
可以省掉变量obj，直接写成如下的形式：
var panel = new Ext.Panel(Panel({title:"hello",width:300,height:200,html:'Hello World'});panel.render("hello"); |
render 方法后面的参数表示页面上的div 元素id，也可以直接在参数中通过renderTo 参 数来省略手动谳用render 方法，只需要在构造函数的参数中添加一个renderTo 属性即可， 如下:
|
New Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:' Hello World'}); |
对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过在需要父组件的构造函数中，通过给属性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");
|
上面的代码与下面的代码等价：
|
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的时候才会创建子面板，而后者则在程序一开始就会创建子面板。也就是说，前者实现的是延迟加载。
3.4 组件的配置属性
在ExtJS 中，除了一些特殊的组件或类以外，所有的组件在初始化的时候都可以在构造
函数使用一个包含属性名称及值的对象，该对象中的信息也就是指组件的配置属性。
比如配置一个面板：
|
new Ext.Panel({
title:"面板",
html"面板内容",
height:100}
);
|
再比如创建哟个按钮：
|
var b=new Ext.Button({
text:"添加",
pressed:true,
heigth:30,
handler:Ext.emptyFn
});
|
再比如创建一个Viewport及其中的内容：
|
new Ext.Viewport({
layout:"border",
items:[{region:"north",
title:"面板",
html:"面板内容",
height:100}, {
region:"center",
xtype:"grid",
title:"学生信息管理",
store:troe,
cm:colM,
store:store,
autoExpandColumn:3
} ]
});
|
每一个组件除了继承基类中的配置属性以外，还会根据需要增加自己的配置属性，另外 子类中有的时候还会把父类的一些配置属性的含义及用途重新定义。
由于所有的组件都继承自Ext.Component，因此在这里我们列出组件基类Component 中
的配置属性简单介绍。
| 配置属性 | 类型 | 简介 |
| allowDomMove | Boolean |
当渲染这个组件时是否允许移动Dom节点（默认值为true）。
|
| applyTo | Mixed |
混合参数，表示把该组件应用指定的对象。参数可以是—节点的id， 一个DOM节点或一个存在的元素或与之相对应的在document中已出现 的id。当使用applyTo，也可以提供一个id或CSS的class名称，如果子组 件允许它将尝试创建一个。如果指写applyTo选项，所有传递到renderTo 方法的值将被忽略，并且目标元素的父节点将自动指定为这个组件的容 器。使用applyTo选项后，则不需要再调用render()方法来渲染组件。
|
| autoShow | Boolean |
自动显示，如为true，则组件将检查所有隐藏类型的class（如：’xhidden’ 或’x-hide-display’并在渲染时移除(默认为false)。
|
| cls | String |
给组件添加额外的样式信息，（默认值为''），如果想自定义组件或它的 子组件的样式，这个选项是非常有用的。
|
| ctCls | String |
给组件的容器添加额外的样式信息，默认值为'')。
|
| disabledClass | String |
给被禁用的组件添加额外的CSS样式信息，（默认为"x-item-disabled"）。
|
| hideMode | String |
组件的隐藏方式， 支持的值有’visibility’ ， 也就是css 里的
visibility，’offsets’负数偏移位置的值和’display’也就是css里的display，
默认值为’display’。
|
| hideParent | Boolean |
是否隐藏父容器，该值为true时将会显示或隐藏组件的容器，false时则
只隐藏和显示组件本身（默认值为false）。
|
| id | String |
组件的id，默认为一个自动分配置的id。
|
| listneners | Object |
给对象配置多个事件监听器，在对象初始化会初始化这些监听器。
|
| plugins | Object/Array |
一个对象或数组，将用于增加组件的自定义功能。一个有效的组件插 件必须包含一个init方法，该方法可以带一个Ext.Component类型参数。 当组件建立后，如果该组件包含有效的插件，将调用每一个插件的init 方法，把组件传递给插件，插件就能够实现对组件的方法调用及事件应 用等，从而实现对组件功能的扩充。
|
| renderTo | Mixed |
混合数据参数，指定要渲染到节点的id，一个DOM的节点或一个已存 在的容器。如果使用了这个配置选项，则组件的render()就不是必需的 了。
|
| stateEvents | Array |
定义需要保存组件状态信息的事件。当指定的事件发生时，组件会保存 它的状态（默认为none），其值为这个组件支持的任意event类型，包含 组件自身的或自定义事件。（例如：[‘click’,’customerchange’]）。
|
| stateId | String |
组件的状态ID，状态管理器使用该id来管理组件的状态信息，默认值为 组件的id。
|
| style | String |
给该组件的元素指定特定的样式信息， 有效的参数为 Ext. Element. applyStyles 中的值。
|
| xtype | String |
指定所要创建组件的xtype，用于构造函数中没有意义。该参数用于在 容器组件中创建创建子组件并延迟实例化和渲染时使用。如果是自定义 的组件，则需要用Ext.ComponentMgr.registerType来进行注册，才会支 持延迟实例化和渲染。
|
| el | Mixed |
相当于applyTo
|
3.5 ExtJS组件的时间处理
ExtJS 提供了一套强大的事件处理机制，通过这些事件处理机制来响应用户的动作、监 控控件状态变化、更新控件视图信息、与服务器进行交互等等。事件统一由 Ext.EventManager 对象管理，与浏览器W3C 标准事件对象Event 相对应，Ext 封装了一个 Ext.EventObject 事件对象。支持事件处理的类(或接口)为Ext.util.Observable，凡是继承该类 的组件或类都支持往对象中添加事件处理及响应功能。
首先我们来看标准html 中的事件处理，看下面的html 代码：
|
|
点击这个按钮则会触发onclick 事件，并执行onclick 事件处理函数中指定的代码，这里 直接执行函数a 中的代码，也即弹出一个简单的信息提示框。再简单修改一下上面的代码， 内容如下：
|
|
上面的代码在文档加载的时候，就直接对btnAlert 的onclick 赋值，非常清晰的指明了 按钮btnAlert 的onclick 事件响应函数为a，注意这里a 后面不能使用括号“()”。 ExtJS 中组件的事件处理跟上面相似，看下面的代码：
|
|
Ext.get("btnAlert")得到一个与页面中按钮btnAlert 关联的Ext.Element 对象，可以直接调 用该对象上的addListener 方法来给对象添加事件，同样实现前面的效果。在调用addListener 方法的代码中，第一个参数表示事件名称，第二个参数表示事件处理器或整个响应函数。 ExtJS 支持事件队列，可以往对象的某一个事件中添加多个事件响应函数，看下面的代码：
|
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a);
Ext.get("btnAlert").on("click",a);
});
|
addLinster 方法的另外一个简写形式是on，由于调用了两次addListener 方法，因此当点 击按钮的时候会弹出两次信息。 当然，ExtJS 还支持事件延迟处理或事件处理缓存等功能，比如下面的代码：
|
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});
|
由于在调用addListener 的时候传递指定的delay 为2000，因此当用户点击按钮的时候， 不会马上执行事件响应函数，而是在2000 毫秒，也就是两秒后才会弹出提示信息框。 当然，在使用Ext 的事件时，我们一般是直接在控件上事件，每一个控件包含哪些事件， 在什么时候触发，触发时传递的参数等，在ExtJS 项目的文档中都有较为详细的说明。比 如对于所有的组件Component，都包含一个beforedestroy 事件，该事件会在Ext 销毁这一个 组件时触发，如果事件响应函数返回false，则会取消组件的销毁操作。
|
Ext.onReady(function(){
var win=new Ext.Window({
title:"不能关闭的窗口", height:200, width:300
});
win.on("beforedestroy",function(obj){
alert("想关闭我，这是不可能的!");
obj.show();
return false;
});
win.show();});
|
由于在窗口对象的beforedestroy 事件响应函数返回值为false，因此执行这段程序，你 会发现这个窗口将无法关闭。组件的事件监听器可以直接在组件的配置属性中直接声明，如 下面的代码与前面实现的功能一样：
|
Ext.onReady(function(){
var win=new Ext.Window({
title:"不能关闭的窗口",
height:200, width:300,
listeners:{"beforedestroy":function(obj){
alert("想关闭我，这是不可能的!");
obj.show(); return false;
}}
});
win.show();});
|