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");
<div id="hello"> </div>
|
可以省掉变量obj,直接写成如下的形式:
var panel = new Ext.Panel(Panel({title:"hello",width:300,height:200,html:'<h1>Hello World</h1>'}); panel.render("hello"); |
render 方法后面的参数表示页面上的div 元素id,也可以直接在参数中通过renderTo 参
数来省略手动谳用render 方法,只需要在构造函数的参数中添加一个renderTo 属性即可,
如下:
New Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello World
</h1>'});
|
对于容器中的子元素组件,都支持延迟加载的方式创建控件,此时可以直接通过在需要父组件的构造函数中,通过给属性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 代码:
<script>
function a() {
alert('some thing');
}
</script>
<input id="btnAlert" type="button" οnclick="a();" value="alert框" />
|
点击这个按钮则会触发onclick 事件,并执行onclick 事件处理函数中指定的代码,这里
直接执行函数a 中的代码,也即弹出一个简单的信息提示框。再简单修改一下上面的代码,
内容如下:
<script>
function a()
{
alert('some thing');
}
window.οnlοad=function(){
document.getElementById("btnAlert").οnclick=a;
}
</script>
<input id="btnAlert" type="button" value="alert框" />
|
上面的代码在文档加载的时候,就直接对btnAlert 的onclick 赋值,非常清晰的指明了
按钮btnAlert 的onclick 事件响应函数为a,注意这里a 后面不能使用括号“()”。
ExtJS 中组件的事件处理跟上面相似,看下面的代码:
<script>
function a(){
alert('some thing');
}
Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
});
</script>
<input id="btnAlert" type="button" value="alert框" />
|
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();});
|