首先是DomHelper这个对象的使用。它可以完成一些列的页面元素的操作:包括整删改查等。
Ext.onReady(function(){
/* insertHtml( String where, HTMLElement el, String html ) : HTMLElement
* 参数where:插到哪里:beforeBegin,afterBegin,beforeEnd,afterEnd
* 参数el:参照的元素是谁
* 参数html:插入的内容是什么
*/
Ext.DomHelper.insertHtml("afterBegin",Ext.get("e").dom,"<div>插入这个层</div>");
/*
* 下面的方法都差不多,我们通过一个实例来说明他们的用法
* insertFirst( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element
创建新的DOM元素并将它们作为指定元素的第一个孩子插入。
* insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element
创建新的DOM元素并将它们插入到指定的元素前面。
* insertAfter( Mixed el, Object o, [Boolean returnElement] ) : HTMLElement/Ext.Element
创建新的DOM元素并将它们插入到指定的元素后面。
* append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element
创建新的DOM元素并将它们扩展到指定的元素之后。
*/
var domHelper = Ext.DomHelper;
//在c2之前插入div c2:Ext.get("c2").dom或者"c2"
domHelper.insertBefore(Ext.get("c2").dom,"<div>c2-child-2</div>");
//在c2之后插入div
domHelper.insertAfter("c2",{
tag:"div",
html:"c2-child"
});
//将一个新借点作为parent的第一个子节点
domHelper.insertFirst("parent","<div>parent-first-child</div>");
//讲c3的内容更新
domHelper.overwrite("c3","there are new contents");
//将一个新节点作为parent的最后一个子节点
domHelper.append("parent",{
tag:"div",
html:"parent-last-child"
});
});
接下来是模块。模块就是一个模子,我们的页面根据模具规定的内容显示,还可以灵活的操作元素。
Ext.onReady(function(){
//1、定义XTemplate对象 指定一段html代码作为模版
//2、指定XTemplate中定义的html应该放置的位置,并填充占位符信息
//3、编译XTemplate
//使用数组格式
var xt = new Ext.XTemplate(
"<table border={0} width={1}>",
"<tr>",
"<td>{2}</td>",
"<td>{3}</td>",
"<td>{4}</td>",
"</tr>",
"</table>"
);
//Ext.get("xt").dom == "xt"
xt.append("xt",[1,300,'单元格1','单元格2','单元格3']);
xt.compile();
//使用json格式
var xt = new Ext.XTemplate(
"<table border={a} width={b}>",
"<tr>",
"<td>{c}</td>",
"<td>{d}</td>",
"<td>{e}</td>",
"</tr>",
"</table>"
);
//Ext.get("xt").dom == "xt"
xt.append("xt",{a:"1",b:"300",c:'单元格1',d:'单元格2',e:'单元格3'});
xt.compile();
});
截图是表格: