运行上面的代码可以实现如下图所示的结果：

varpanel=newExt.Panel（{title:

"hello",width:

300,height:

200,html:

'

Hello,easyjfopensource

'}）;

panel.render（"hello"）;

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

newExt.Panel（{renderTo:

"hello",title:

"hello",width:

300,height:

200,html:

'

Hello,easyjfopensource

'}）;

render方法后面的参数表示页面上的div元素id，也可以直接在参数中通过renderTo参数来省略手动调用render方法，只需要在构造函数的参数中添加一个renderTo属性即可，如下：

varpanel=newExt.TabPanel（{width:

300,height:

200,items:

[

{title:

“面板1”,height:

30},{title:

“面板2”,height:

30},{title:

“面板3”,height:

30}]

}）;

panel.render（“hello”）;

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

如下面的代码：

 

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

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

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

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

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

 

4.匿名对象，函数和延时加载

 

5.xtype的使用

xtype就是一个代表类（Class）的标识名字。

譬如，你有这个类，名字是Ext.ux.MyGrid。

正常情况下你需要用这个名字来实例化这个类（创建类的对象）。

vargrid=newExt.ux.MyGrid（）;

除了类名外，你还可以这样登记类的xtype：

Ext.reg（'mygrid',Ext.ux.MyGrid）;

其中xtype是mygrid而类名的一般形式是Ext.ux.MyGrid。

上面的语句登记了新的xtype，换种说法说，xtypemygrid与类Ext.ux.MyGrid是连在一起的。

到底有什么好处？

如果你使用xtype，那么在内存中的仅仅是一个匿名对象，像：

{xtype:

'mygrid", border:

false, width:

600, height:

400, ...} 

消耗没有复杂的实例对象来得大。

等价于：

newExt.ux.MyGrid（）;

 

6.组件的配置属性

在ExtJS中，除了一些特殊的组件或类以外，所有的组件在初始化的时候都可以在构造函数使用一个包含属性名称及值的对象，该对象中的信息也就是指组件的配置属性。

比如配置一个面板：

newExt.Panel（{

title:

"面板",

html"面板内容",

height:

100}）;

varb=newExt.Button（{

text:

"添加",

pressed:

true,

height:

30,

handler:

Ext.emptyFn

}）;

再比如创建一个按钮：

每一个组件除了继承基类中的配置属性以外，还会根据需要增加自己的配置属性，另外子类中有的时候还会把父类的一些配置属性的含义及用途重新定义。

学习及使用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

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

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。

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

 

7.事件处理

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方法，因此当点击按钮的时候会弹出两次信息。

 

Ext.onReady（function（）{

Ext.get（"btnAlert"）.on（"click",a,this,{delay:

2000}）;

}）;

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

　　由于在调用addListener的时候传递指定的delay为2000，因此当用户点击按钮的时候，不会马上执行事件响应函数，而是在2000毫秒，也就是两秒后才会弹出提示信息框。

This指代发生事件的对象。

Ext.onReady（function（）{

varwin=newExt.Window（{

title:

"不能关闭的窗口",

height:

200,

width:

300

}）;

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

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

"）;

obj.show（）;

returnfalse;

}）;

win.show（）;

}）;

当然，在使用Ext的事件时，我们一般是直接在控件上事件，每一个控件包含哪些事件，在什么时候触发，触发时传递的参数等，在ExtJS项目的文档中都有较为详细的说明。

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

 

由于在窗口对象的beforedestroy事件响应函数返回值为false，因此执行这段程序，你会发现这个窗口将无法关闭。

相关搜索

当前位置：首页 > 高等教育 > 工学