可以省掉变量obj，直接写成如下的形式：

varpanel=newExt.Panel（{title:

"hello",width:

300,height:

200,html:

'

Hello,easyjfopensource

panel.render（"hello"）;

render方法后面的参数表示页面上的div元素id，也可以直接在参数中通过renderTo参

数来省略手动调用render方法，只需要在构造函数的参数中添加一个renderTo属性即可

varpanel=newExt.Panel（{renderTo:

"hello",title:

"hello",width:

300,height:

200,html:

'

Hello,easyjfopensource

对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过在需要

父组件的构造函数中，通过给属性items传递数组方式实现构造。

如下面的代码：

varpanel=newExt.TabPanel（{width:

300,height:

200,items:

[{title:

"面板1",height:

30},{title:

"面板2",height:

30},{title:

"面板3",height:

30}]}）;panel.render（"hello"）;

注意中括号中加粗部份的代码，这些代码定义了TabPanel这个容器控件中的子元素，这里包括三个面板。

上面的代码与下面的代码等价：

varpanel=newExt.TabPanel（{width:

300,height:

200,items:

[newExt.Panel（{title:

"面板1",height:

30}）,newExt.Panel（{title:

"面板2",height:

30}）,newExt.Panel（{title:

"面板3",height:

30}）]}）;panel.render（"hello"）;

上两处代码，前者不但省略掉了newExt.Panel这个构造函数，最重要前者只有在初始化TabPanel的时候，才会创建子面板，而第二种方式则在程序一开始就会创建子面板。

也就是说，前者实现的延迟加载。

5、组件的配置属性

在ExtJS中，除了一些特殊的组件或类以外，所有的组件在初始化的时候都可以在构造

函数使用一个包含属性名称及值的对象，该对象中的信息也就是指组件的配置属性。

比如配置一个面板：

Vara=newExt.Panel（{

title:

"面板",

html"面板内容",

height:

100}

）;

创建一个按钮：

varb=newExt.Button（{

text:

"添加",

pressed:

true,

heigth:

30,

handler:

Ext.emptyFn

}）;

创建一个Viewport及其中的内容：

newExt.Viewport（{

layout:

"border",

items:

[{region:

"north",

title:

"面板",

html:

"面板内容",

height:

100},

{region:

"center",

xtype:

"grid",

title:

"学生信息管理",

store:

troe,

cm:

colM,

store:

store,

autoExpandColumn:

3

}

]

}）;

每一个组件除了继承基类中的配置属性以外，还会根据需要增加自己的配置属性，另外

子类中有的时候还会把父类的一些配置属性的含义及用途重新定义。

学习及使用ExtJS，

其中最关键的是掌握ExtJS中的各个组件的配置属性及具体的含义，这些配置属性在下载下

来的ExtJS源码文档中都有详细的说明，可以通过这个文档详细了解每一个组件的特性。

由于所有的组件都继承自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（如：

”x-hidden”

或”x-hide-display”并在渲染时移除（默认为false）。

cls

String

给组件添加额外的样式信息，（默认值为''），如果想自定义组件或它的

子组件的样式，这个选项是非常有用的。

ctCls

String

给组件的容器添加额外的样式信息，默认值为''）。

disabled

Class

String给被禁用的组件添加额外的CSS样式信息，（默认为"x-item-disabled"）。

hideMode

String

组件的隐藏方式，支持的值有”visibility”，也就是css里的

visibility，”offsets”负数偏移位置的值和”display”也就是css里的display，

默认值为”display”。

hideParent

Boolean

是否隐藏父容器，该值为true时将会显示或隐藏组件的容器，false时则

只隐藏和显示组件本身（默认值为false）。

id

String

组件的id，默认为一个自动分配置的id。

listeners

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

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}）;

}）;

当然，在使用Ext的事件时，我们一般是直接在控件上事件，每一个控件包含哪些事件，

在什么时候触发，触发时传递的参数等，在ExtJS项目的文档中都有较为详细的说明。

比

如对于所有的组件Component，都包含一个beforedestroy事件，该事件会在Ext销毁这一个组件时触发，如果事件响应函数返回false，则会取消组件的销毁操作。

Ext.onReady（function（）{

varwin=newExt.Window（{

title:

"不能关闭的窗口",height:

200,width:

300

}）;

win.on（"beforedestroy",function（obj）{

alert（"想关闭我，这是不可能的!

"）;

obj.show（）;

returnfalse;

}）;

win.show（）;}）;

由于在窗口对象的beforedestroy事件响应函数返回值为false，因此执行这段程序，你

会发现这个窗口将无法关闭。

组件的事件监听器可以直接在组件的配置属性中直接声明，如下面的代码与前面实现的功能一样：

Ext.onReady（function（）{

varwin=newExt.Window（{

title:

"不能关闭的窗口",

height:

200,width:

300,

listeners:

{"beforedestroy":

function（obj）{

alert（"想关闭我，这是不可能的!

"）;

obj.show（）;returnfalse;

}}

}）;

win.show（）;}）;

6、

A:

面板Panel是ExtJS控件的基础，很高级控件都是在面板的基础上扩展的，还有其它大多数控件也都直接或间接有关系。

应用程序的界面一般情况下是由一个一个的面板通过不同组织方式形成。

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

面板主区域几个部分组件。

面板类中还内置了面板展开、关闭等功能，并提供一系列可重

用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，它里面又可以包含各种其它组件。

Ext.onReady（function（）{

newExt.Panel（{

renderTo:

"hello",

title:

"面板头部header",

width:

300,

height:

200,

html:

'

面板主区域

tbar:

[{text:

'顶部工具栏topToolbar'}],

bbar:

[{text:

'底部工具栏bottomToolbar'}],

buttons:

[{text:

"按钮位于footer"}]

}）;

}）;

运行该代码，可以得到如图xx所示的输出结果，清楚的表示出了面板的各个组成部分。

一般情况下，顶部工具栏或底部工具栏只需要一个，而面板中一般也很少直接包含按钮，

一般会把面板上的按钮直接放到工具栏上面。

比如下面的代码：

Ext.onReady（function（）{

newExt.Panel（{

renderTo:

"hello",

title:

"hello",

width:

300,

height:

200,

html:

'

Hello,easyjfopensource!

tbar:

[{pressed:

true,text:

'刷新'}]

}）;

}）;

可以得到如图xx所示的效果，该面板包含面板Header，一个顶部工具栏及面板区域三

个部分。

B:

面板中可以有工具栏，工具栏可以位于面板顶部或底部，Ext中工具栏是由Ext.Toolbar

类表示。

工具栏上可以存放按钮、文本、分隔符等内容。

面板对象中内置了很多实用的工具

栏，可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。

比如下面的

代码：

Ext.onReady（function（）{

newExt.Panel（{

renderTo:

"hello",

title:

"hello",

width:

300,

height:

200,

html:

'

Hello,easyjfopensource!

tools:

[{id:

"save"},

{id:

"help",handler:

function（）{Ext.Msg.alert（'help','pleasehelpme!

'）;}

},{id:

"close"}],

tbar:

[{pressed:

true,text:

'刷新'}]

}）;

}）

点击help按钮会执行handler中的函数，显示一个弹出