ExtJs之元素操作与模板(ExtJs.DomHelper和Ext.XTemplate)

 

一、简介

元素操作通常是指标签的创建、定位、删除和样式定义等。

 

模板是Extjs中一个非常重要的基础功能，因为需要生成大量的HTML标签，使用模板绝对是不二的最佳选择，能带来非常棒的可读性。

 

二、Ext.DomHelper 类

Ext.DomHelper 类帮助我们使用javascript 清晰地生成HTML代码，他的使用非常灵活，我们应该找准他的主线，像庖丁解牛一样再慢慢剖开。

 

任何复杂的东西都有他存在的根基，根基就是精髓、是重心。过于浮躁搞不出什么深度，也容易让人丧失自信，掌握一套适合自己的学习方法非常必要，在学习中不断沉淀，完善自我——不仅仅是搞技术，其实任何事情都一样。只要付出了百分之一百的努力，就算没有成功也不会后悔。

 

1、insertHtml ( String where, HTMLElement el, String html )：在指定的元素上插件HTML片段。

参数：

where：插到哪里？可选值有：beforeBegin, afterBegin, beforeEnd, afterEnd

el：参照元素

html：插件的内容

示例：在页面上定义如下div：<div id="e">这是一个层</div>

Ext.DomHelper.insertHtml("afterBegin", Ext.get("e").dom, "<div> 中华人民共和国</div>")

 在页面上生成的结果如下：

<div id="e">
<div>中华人民共和国</div>
这是一个层
</div>

 通过修改第一个参数的值，可以总结出四个可选值的含义：

beforeBegin：插入起始标签之前

afterBegin：插入到起始标签之后，本示例就是这种情况

beforeEnd：插入到结束标签之前

afterEnd：插入到结束标签之后

 

 

2、下面的方法都差不多，我们通过一个示例来说明他们的用法。

insertBefore ( */ , Object/String o)：新节点插入到指定节点之前；

insertAfter ( */ , Object/String o)：新节点插入到指定节点之后；

insertFirst ( */ , Object/String o)：新建节点并插入到指定节点作为第一个子节点；

append(*/ , Object/String o)：新建节点并插入到指定节点作为最后一个子节点；

overwrite ( */ , Object/String o)：替代指定节点内容；

参数：

*/：指定节点，类型可以为String/HTMLElement/Element

o：新节点，可以是dom对象（子孙）或裸HTML标记

示例：

HTML代码如下：

<div id="parent">
<div id="c1">第1 个孩子</div>
<div id="c2">第2 个孩子</div>
<div id="c3">第3 个孩子</div>
<div id="c4">第4 个孩子</div>
<div id="c5">第5 个孩子</div>
</div>

 JS代码如下：

//在c2 之前插入div
Ext.DomHelper.insertBefore("c2", "<div>c2-child-2</div>");
//在c2 之后插入div
Ext.DomHelper.insertAfter("c2", {tag: "div", html: "c2-child"});
//将一个新节点作为parent的第一个子节点
Ext.DomHelper.insertFirst("parent", "<div>parent-first-child</div>");
//将c3 的内容更新
Ext.DomHelper.overwrite("c3", "There are new contents");
//将一个新节点作为parent的最后一个子节点
Ext.DomHelper.append("parent", {tag: "div", html: "parent-last-child"});

 结果：

<div id="parent">
<div>parent-first-child</div>
<div id="c1">第1 个孩子</div>
<div>c2-child-2</div>
<div id="c2">第2 个孩子</div>
<div>c2-child</div>
<div id="c3">There are new contents</div>
<div id="c4">第4 个孩子</div>
<div id="c5">第5 个孩子</div>
<div>parent-last-child</div>
</div>

从例子中可以看出，新建的节点可以指定多种类型：即可以是一段HTML 标记，也可以是一个json对象，对于后者，可以通过cls属性来指定类选择器。 

 

 

三、Ext.XTemplate类

 

Templete 是模板之意，就是定义一段HTML 代码，并放置若干个{}作为占位符，运行时将数据填充到{}中去。

XTemplate和DomHelper 有很深的渊源，DomHelper 是XTemplate的小弟，DomHelper解决不了的事情，XTemplate一定可以。

使用XTemplate一般会经历三个步骤：

1、定义XTemplate对象，指定一段HTML代码作为模板；

2、指定XTemplate中定义的HTML应该放置的位置，并填充占位符信息；

3、编译XTemplate。

 

先看一个简单的例子来说明问题：

Ext.onReady(function(){
var xt = new Ext.XTemplate(
"<table border={0} width={1}>",
"<tr>",
"<td>{2}</td>",
"<td>{3}</td>",
"<td>{4}</td>",
"</tr>",
"</table>"
);
xt.append("xt", [1, 300, '单元格1', '单元格2', '单元格3']);
xt.compile();
})

 页面如下：

<div id="xt"></div>

实例化XTemplate时，可以配置任意个参数，会自动连接到一起，这种写法似乎更方便更好读。append 方法同DomHelper 的append 方法，实际上还有insertBefore、insertAfter、insertFirst、overwrite 等方法，不同的是第二个参数，该参数是要填充到占位符中的数据，可以是数组，也可以是json对象。执行完之后得到如下结果：

<div id="xt">
<table border="1" width="300">
<tbody>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</tbody>
</table>
</div>

 

下面是改造后的例子，填充数据时用json对象代替了原来的数组：

Ext.onReady(function(){
var xt = new Ext.XTemplate(
"<table border={b} width={w}>",
"<tr>",
"<td>{v1}</td>",
"<td>{v2}</td>",
"<td>{v3}</td>",
"</tr>",
"</table>"
);
xt.append("xt", {b: 1, w: 300, v1: "单元格1", v2: "单元格2", v3: "单元格3"});
xt.compile();
});

 

 

如果需要请在附件下载API.