Ext.Element

Ext.Element

博客分类： 
• Ext学习

Ext.Element

 

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来组织显示。运行结果实例如下：