学步园

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

截图是表格：