ExtJS自学笔记3---元素操作 Ext.DomHelper类、Ext.XTemplate模板

<html>
  <head>
    <title></title>
 <link href="ext/ext-all.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src=\'#\'" /bootstrap.js"></script>
 <script type="text/javascript" src=\'#\'" /ext-all.js"></script>
 <script type="text/javascript" src=\'#\'" /ext-lang-zh_CN.js"></script>
 <script type="text/javascript"> 
  //Ext.BLANK_IMAGE_URL='resources/themes/images/default/tree/s.gif';
  //一、Ext.DomHelper 类  元素操作---------------------------------------------
  /*
   1、insertHtml(String where,HTMLElement el,String html ):在指定的元素上插件HTML片段。
   参数:
   where:插到哪里?可选值有:
    beforeBegin:插入起始标签之前
    afterBegin:插入到起始标签之后,本示例就是这种情况
    beforeEnd:插入到结束标签之前
    afterEnd:插入到结束标签之后
   el:参照元素
   html:插件的内容
   */
  Ext.onReady(function(){
   Ext.DomHelper.insertHtml("afterEnd",Ext.get("d1").dom,"<div>id为d2的div元素</div>");
   /*
   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标记
   */
   //在c2之前插入元素
   Ext.DomHelper.insertBefore("c2","<div>->插入到c2之前的元素</div>");
   //在c2之后插入元素
   Ext.DomHelper.insertAfter("c2",{tag:"div",html:"->插入到c2之后的元素"});
   //新建节点作为parent的第一个子节点
   Ext.DomHelper.insertFirst("parent","<div>->parent的第一个子节点</div>");
   //新建节点作为parent的最后一个子节点
   Ext.DomHelper.append("parent","<div>->parent的最后一个子节点</div>");
   //将c3的内容替代
   Ext.DomHelper.overwrite("c3","<div>->替代c3的元素</div>");
   //新建的节点可以指定多种类型:
   //即可以是一段HTML 标记,也可以是一个json对象,对于后者,可以通过cls属性来指定类选择器。
   
   //二、Ext.XTemplate   模板---------------------------------------
   /*
   使用EXTemplate一般会经历三个步骤:
    1、定义XTemplate对象,指定一段HTML代码作为模板;
    2、指定XTemplate中定义的HTML应该放置的位置,并填充占位符信息;
    3、编译XTemplate。
   */
   //数组填充
   var xtArr = new Ext.XTemplate(
    "<table border={0} width={1}>",
     "<tr>",
      "<td>{2}</td>",
      "<td>{3}</td>",
      "<td>{4}</td>",
     "</tr>",
    "</table>"
   );
   xtArr.append("xtArr", [1, 300, '单元格1', '单元格2', '单元格3']);
   /*
   append 方法同DomHelper 的append 方法,实际上还有insertBefore、insertAfter、
   insertFirst、overwrite 等方法,不同的是第二个参数,该参数是要填充到占位符中的数据,
   可以是数组,也可以是json对象。
   */
   xtArr.compile();
   //json填充
   var xtJson = new Ext.XTemplate(
    "<table border={b} width={w}>",
     "<tr>",
      "<td>{v1}</td>",
      "<td>{v2}</td>",
      "<td>{v3}</td>",
     "</tr>",
    "</table>"
   );
   xtJson.append("xtJson", {b: 1, w: 300, v1: "单元格1", v2: "单元格2", v3: "单元格3"});
   xtJson.compile();

//EXTemplate内容太多,用的时候查APT
  });
 </script>
  </head>
  <body>
 <div>&nbsp;</div>
 <div id="d1">id为d1的div元素</div>
 <div id="parent">
  <div id="c1">id为c1的c1元素</div>
  <div id="c2">id为c2的c2元素</div>
  <div id="c3">id为c3的c3元素</div>
  <div id="c4">id为c4的c4元素</div>
 </div>
 <div id="xtArr"></div>
 <div id="xtJson"></div>
  </body>
<html> 
 

你可能感兴趣的:(ExtJS自学笔记3---元素操作 Ext.DomHelper类、Ext.XTemplate模板)