2、ExtJS的Heart—Ext.Element
Ext.Element和Ext.Observable是ExtJS的核心:Ext.Element是构建ExtJS组件的基础,而Ext.Observable是ExtJS事件管理的基础。
2.1、如何理解Ext.Element
不管ExtJS的功能多么强,做出的页面多么美观、专业,ExtJS的所有组件最终都是通过HTML和CSS来实现的,因此,HTML DOM的Element类在ExtJS中同样起着非常重要的作用。但是,由于HTML DOM的Element类的功能相对比较简单,ExtJS对HTML DOM的Element类进行了包装和扩展,形成了ExtJS自己的Ext.Element类。
Ext.Element是基于ExtJS的页面的重要的、最基本的组成部分。可以说,Ext.Element是ExtJS的heart:所有漂亮的组件,像Ext.Button、Ext.Window等,虽然这些组件的祖先类是Ext.Component,但是,归根到底,这些组件,同时也包括Ext.Component,它们都是由具有一定层次结构的Ext.Element对象构建而成的,也就是说,一个Component是由一组具有一定层次结构的Ext.Element对象构成的。证据:在Ext.Component类中有一个e1属性,在ExtJS的API文档中是这样说的:
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only.
这就是说,这个el属性就指向用于构建这个Component组件的根Element!(当然,为了构建出像Ext.Button这样美观的组件,这个el一定有许多child Elements)。
由于Ext.Element是对HTML的DOM的Element的包装和扩展,因此,从Ext.Element中可以得到HTML的DOM的Element:通过dom属性即可。
通常情况下,通过语句:
Ext.get(“id”);
即可获得某个DOM元素的Ext.Element对象,之后,可以在所获得的对象上进行多种操作,包括:appendxxx、insertxxxx、createxxx、load等,可以在Ext.Element对象上监听并处理发生在该对象上的浏览器事件,还有,可以在某个Ext.Element对象执行Ext.Fx中定义的所有动画效果操作。
2.2、Ext.Template及Ext.XTemplate模板应用
换一个话题,介绍一下Ext.Template及Ext.XTemplate的应用。
2.2.1、Ext.Template
Ext.Template,顾名思义,模板,它是一个很有用的类。下面是一个典型的Ext.Template应用例子:
var myTpl = new Ext.Template("<div>Hello {0}.</div>"); //定义了一个模板
myTpl.append(document.body, ['Marjan']); //可以多次应用模板
myTpl.append(document.body, ['Michael']);
myTpl.append(document.body, ['Sebastian']);
执行这段代码,将产生如下的DOM:
这段代码:首先创建一个模板,在这个模板中有一个占位参数 {0},由于是使用数字占位参数,所以在应用该模板时,将从实际数组参数中获得数组的第一个元素来替换{0}的值。这也是为什么在应用模板时,我们使用数组最为实际参数。
我们也可以使用对象来传递值,这时,需要在模板中使用 {对象属性名} 的形式来占位,例如:
var myTpl = new Ext.Template(
'<div style="background-color: {color}; margin: 10;">',
'<b> Name :</b> {name}<br />',
'<b> Age :</b> {age}<br />',
'<b> DOB :</b> {dob}<br />',
'</div>'
);
myTpl.compile();
myTpl.append(document.body,{
color : "#E9E9FF",
name : 'John Smith',
age : 20,
dob : '10/20/89'
});
myTpl.append(document.body,{
color : "#FFE9E9",
name : 'Naomi White',
age : 25,
dob : '03/17/84'
});
执行这段代码,结果如下图所示:
2.2.2、Ext.XTemplate
Ext.Template只能作用于单个对象,当要同时作用于对象数组中的每个对象时,这就是Ext.XTemplate的用武之地:因为Ext.XTemplate提供loop功能。看一个例子就知道如何使用Ext.XTemplate了:
var tplData = [
{
color : "#FFE9E9",
name : 'Naomi White',
age : 25,
dob : '03/17/84',
cars : ['Jetta', 'Pilot', 'S2000']
},
{
color : "#E9E9FF",
name : 'John Smith',
age : 20,
dob : '10/20/89',
cars : ['Civic', 'Accord', 'Pilot']
}
];
var myTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="background-color: {color}; margin: 10;">',
'<b> Name :</b> {name}<br />',
'<b> Age :</b> {age}<br />',
'<b> DOB :</b> {dob}<br />',
'</div>',
'</tpl>'
);
myTpl.compile();
myTpl.append(document.body, tplData);
注意代码:
'<tpl for=".">',
中的“.”这个东西,它表示:对所传递的参数数组的每个对象,按照tpl中定义的HTML来组织显示。运行结果实例如下: