Ext学习之4_ElementOperateAndTemplate

Ext.namespace("com.deng");
/**
 * Ext.DomHelper类
 * Ext.DomHelper类帮助我们使用javascript清晰的生成html代码
 */ 
/**
 * insertHtml(String where, HTMLElement el, String html)
 * 在指定的元素上插入HTML片段
 * 参数：
 *  where: 查到哪里？可选值有(beforeBegin,afterBegin,beforeEnd,afterEnd)
 *  el: 参照元素
 *  html: 插件内容
 */

Ext.onReady(function(){
	Ext.DomHelper.insertHtml("afterBegin",Ext.get("a1").dom,"<div>中华人民共和国</div>")
});
/**
 * 通过修改第一个参数的值，可以总结出4个可选值的含义
 * beforeBegin: 插入起始标签之前
 * afterBeign：插入起始标签之后
 * beforeEnd： 插入到结束标签之前
 * afterEnd： 插入到结束标签之后
 */
/**
 * 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标记
 */
/**
 * 在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"});
 * 
 * 从例子中可以看出，新建的节点可以指定多种类型，可以是一段html代码，也可以是一个json对象
 * ,对于后者可以通过cls属性来指定类选择器
 */