Extjs学习总结之06页面元素操作和模版

首先是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();});

截图是表格：