第2章EXT组件Word文档下载推荐.docx
- 文档编号:21329147
- 上传时间:2023-01-29
- 格式:DOCX
- 页数:12
- 大小:100.71KB
第2章EXT组件Word文档下载推荐.docx
《第2章EXT组件Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《第2章EXT组件Word文档下载推荐.docx(12页珍藏版)》请在冰豆网上搜索。
tbsplit
Ext.Toolbar.SplitButton工具栏分隔按钮
tbtext
Ext.Toolbar.TextItem 工具栏文本项
v基本组件有:
-------------
------------------
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 窗口
v表单及字段组件包含:
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编辑器
numberfield
Ext.form.NumberField 数字编辑器
radio
Ext.form.Radio 单选按钮
textarea
Ext.form.TextArea 区域文本框
textfield
Ext.form.TextField 表单文本框
timefield
Ext.form.TimeField 时间录入项
trigger
Ext.form.TriggerField 触发录入项
3.ExtJS组件的使用
组件可以直接通过new关键子来创建,比如创建一个窗口,使用newExt.Window(),创建一个表格则使用newExt.GridPanel()。
当然,除了一些普通的组件以外,一般都会在构造函数中通过传递构造参数来创建组件。
组件的构造函数中一般都可以包含一个对象,这个对象包含创建组件所需要的配置属性及值,组件根据构造函数中的参数属性值来初始化组件。
比如下面的例子:
<
script>
varobj={title:
"
hello"
width:
300,height:
200,html:
'
h1>
Hello,easyjfopensource<
/h1>
};
varpanel=newExt.Panel(obj);
panel.render("
);
/script>
divid="
>
&
nbsp;
/div>
运行上面的代码可以实现如下图所示的结果:
varpanel=newExt.Panel({title:
});
可以省掉变量obj,直接写成如下的形式:
newExt.Panel({renderTo:
title:
render方法后面的参数表示页面上的div元素id,也可以直接在参数中通过renderTo参数来省略手动调用render方法,只需要在构造函数的参数中添加一个renderTo属性即可,如下:
varpanel=newExt.TabPanel({width:
200,items:
[
{title:
“面板1”,height:
30},{title:
“面板2”,height:
“面板3”,height:
30}]
panel.render(“hello”);
对于容器中的子元素组件,都支持延迟加载的方式创建控件,此时可以直接通过在需要父组件的构造函数中,通过给属性items传递数组方式实现构造。
如下面的代码:
[newExt.Panel(
面板1"
height:
30}),newExt.Panel({title:
面板2"
面板3"
30})]
注意中括号中加粗部份的代码,这些代码定义了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"
面板内容"
100});
varb=newExt.Button({
text:
添加"
pressed:
true,
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
自动显示,如为true,则组件将检查所有隐藏类型的class(如:
’x-hidden’或’x-hide-display’并在渲染时移除(默认为false)。
cls
String
给组件添加额外的样式信息,(默认值为'
),如果想自定义组件或它的子组件的样式,这个选项是非常有用的。
ctCls
给组件的容器添加额外的样式信息,(默认值为'
)。
disabledClass
给被禁用的组件添加额外的CSS样式信息,(默认为"
x-item-disabled"
hideMode
组件的隐藏方式,支持的值有’visibility’,也就是css里的visibility,’offsets’负数偏移位置的值和’display’也就是css里的display,默认值为’display’。
hideParent
是否隐藏父容器,该值为true时将会显示或隐藏组件的容器,false时则只隐藏和显示组件本身(默认值为false)。
id
组件的id,默认为一个自动分配置的id。
listeners
Object
给对象配置多个事件监听器,在对象初始化会初始化这些监听器。
plugins
Object/Array
一个对象或数组,将用于增加组件的自定义功能。
一个有效的组件插件必须包含一个init方法,该方法可以带一个Ext.Component类型参数。
当组件建立后,如果该组件包含有效的插件,将调用每一个插件的init方法,把组件传递给插件,插件就能够实现对组件的方法调用及事件应用等,从而实现对组件功能的扩充。
renderTo
混合数据参数,指定要渲染到节点的id,一个DOM的节点或一个已存在的容器。
如果使用了这个配置选项,则组件的render()就不是必需的了。
stateEvents
Array
定义需要保存组件状态信息的事件。
当指定的事件发生时,组件会保存它的状态(默认为none),其值为这个组件支持的任意event类型,包含组件自身的或自定义事件。
(例如:
[‘click’,’customerchange’])。
stateId
组件的状态ID,状态管理器使用该id来管理组件的状态信息,默认值为组件的id。
style
给该组件的元素指定特定的样式信息,有效的参数为Ext.Element.applyStyles中的值
xtype
指定所要创建组件的xtype,用于构造函数中没有意义。
该参数用于在容器组件中创建创建子组件并延迟实例化和渲染时使用。
如果是自定义的组件,则需要用Ext.ComponentMgr.registerType来进行注册,才会支持延迟实例化和渲染。
el
相当于applyTo
7.事件处理
functiona()
{
alert('
something'
}
inputid="
btnAlert"
type="
button"
onclick="
a();
value="
alert框"
/>
ExtJS提供了一套强大的事件处理机制,通过这些事件处理机制来响应用户的动作、监控控件状态变化、更新控件视图信息、与服务器进行交互等等。
事件统一由Ext.EventManager对象管理,与浏览器W3C标准事件对象Event相对应,Ext封装了一个Ext.EventObject事件对象。
支持事件处理的类(或接口)为Ext.util.Observable,凡是继承该类的组件或类都支持往对象中添加事件处理及响应功能。
首先我们来看标准html中的事件处理,看下面的html代码
functiona()
{
alert('
}
window.onload=function()
document.getElementById("
).onclick=a;
点击这个按钮则会触发onclick事件,并执行onclick事件处理函数中指定的代码,这里直接执行函数a中的代码,也即弹出一个简单的信息提示框。
再简单修改一下上面的代码,内容如下:
上面的代码在文档加载的时候,就直接对btnAlert的onclick赋值,非常清晰的指明了按钮btnAlert的onclick事件响应函数为a,注意这里a后面不能使用括
Ext.onReady(function(){
Ext.get("
).addListener("
click"
a);
号“()”。
ExtJS中组件的事件处理跟上面相似,看下面的代码:
Ext.get("
)得到一个与页面中按钮btnAlert关联的Ext.Element对象,可以直接调用该对象上的addListener方法来给对象添加事件,同样实现前面的效果。
在调用addListener方法的代码中,第一个参数表示事件名称,第二个参数表示事件处理器或整个响应函数。
ExtJS支持事件队列,可以往对象的某一个事件中添加多个事件响应函数,看下面的代码:
).on("
});
addLinster方法的另外一个简写形式是on,由于调用了两次addListener方法,因此当点击按钮的时候会弹出两次信息。
a,this,{delay:
2000});
当然,ExtJS还支持事件延迟处理或事件处理缓存等功能,比如下面的代码:
由于在调用addListener的时候传递指定的delay为2000,因此当用户点击按钮的时候,不会马上执行事件响应函数,而是在2000毫秒,也就是两秒后才会弹出提示信息框。
This指代发生事件的对象。
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,因此执行这段程序,你会发现这个窗口将无法关闭。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第2章 EXT组件 EXT 组件