首页 > 代码库 > Ext.js入门：模板（三）

Ext.js入门：模板（三）

2024-08-11 21:38:36   214人阅读

1.Ext.DomHelper简介
2.Template语法使用简介
3.Template简单应用
4.Template中使用转换函数
5.使用模板的自定义接口
6.XTemplate应用

一：Ext.DomHelper
       处理DOM或模板（Templates）的实用类。能以JavaScript较清晰地编写HTML片段（HTML fragments）或DOM。

二：常用方法：

技术分享

三：Template语法使用简介

在一些复杂的情况下，我们需要生成HTML片断，这时最常用，最简单，最有效率的一种做法就是应用Ext提供的模板来完成。

说明：Templete 是模板之意，就是定义一段 HTML 代码，并放置若干个{}作为占位符，

运行 时将数据填充到{}中去。看来看去，和java中的MessageFormat及C#中的string.formate很像。

XTemplate和DomHelper有很深的渊源，DomHelper是XTemplate的小弟，DomHelper解决不了的事情，XTemplate一定可以。 

四：使用XTemplate一般会经历三个步骤：

1、定义XTemplate对象，指定一段HTML代码作为模板；

2、指定XTemplate中定义的HTML应该放置的位置，并填充占位符信息；

3、编译XTemplate。

五：Template简单应用

Ext.onReady(function(){ var xt = new Ext.Template(    "<table border={0} width={1}>",     "<tr>",      "<td>{2}</td>",      "<td>{3}</td>",      "<td>{4}</td>",    "</tr>",    "</table>" );

 

  xt.append("xt", [1, 300, ‘单元格1‘, ‘单元格2‘, ‘单元格3‘]); xt.compile(); })

 

六：实例化Template时，可以配置任意个参数，会自动连接到一起，这种写法似乎更方便 更好读。

append方法同 DomHelper 的 append方法，实际上还有 insertBefore、insertAfter、 insertFirst、overwrite 等方法，

不同的是第二个参数，该参数是要填充到占位符中的数据， 可以是数组，也可以是json对象。执行完之后得到如下结果：

<div id="xt">
 <table border="1" width="300"> 
   <tbody>  
   <tr>      
<td>单元格1</td>  
    <td>单元格2</td>    
  <td>单元格3</td>  
   </tr> 
   </tbody>
 </table> 
</div>

 下面是改造后的例子，填充数据时用json对象代替了原来的数组：

Ext.onReady(function(){ var xt = new Ext.Template(    "<table border={b} width={w}>", 
    "<tr>",   
   "<td>{v1}</td>",   
   "<td>{v2}</td>",    
  "<td>{v3}</td>",   
  "</tr>",  
  "</table>" );  
  xt.append("xt", {b: 1, w: 300, v1: "单元格1", v2: "单元格2", v3: "单元格3"}); 
xt.compile();
 })

七： Template中使用转换函数：

var xt = new Ext.Template(                    "<table border={b} width={w}>",                    "<tr>",                    "<td>{v1}</td>", "<td>{v2:trim}</td>", "<td>{v3:ellipsis(4)}</td>",                    "</tr>",                    "</table>");            xt.append("xt", { b: 1, w: 300, v1: ‘单元格1‘, v2: ‘单元格2‘, v3: ‘单元格3‘ });            xt.compile();

 八：使用模板的自定义接口

JavaScript代码 var data = http://www.mamicode.com/[>
 t.renderSex = function(value) {        if (value =http://www.mamicode.com/= ‘male‘) {"<span style=‘color:red;font-weight:bold;‘>红男</span><img src=http://www.mamicode.com/‘user_male.png‘ />";        } else {            return "<span style=‘color:green;font-weight:bold;‘>绿女</span><img src=http://www.mamicode.com/‘user_female.png‘ />";        }    };    t.compile();//循环得出数据    for (var i = 0; i < data.length; i++) {        t.append(Ext.get(‘some-element‘), data[i]);    }
HTML代码 <table border="1">            <tbody id="some-element">                <tr>                    <td>id</td>                    <td>sex</td>                    <td>name</td>                    <td>descn</td>                </tr>            </tbody></table>

九： 复杂模板

XTemplate对Template的功能进行了增强，

XTemplate不仅支持在模板内部使用子模板，还具有for和if的功能，

可以让我们在模板中实现循环和判断等功能

1、界面HTML:<form id="f"></form>2、js: var data = http://www.mamicode.com/{"{name}" size="{size}">‘,            ‘<tpl for="options"><option value="http://www.mamicode.com/{value:trim}">{text:ellipsis(10)}</option></tpl>‘,        ‘</select>‘    );    t.append(‘f‘, data);Ext.onReady(function(){    var data = http://www.mamicode.com/{"{name}" size="{size}">‘,            ‘<tpl for="options"><option value="http://www.mamicode.com/{.:trim}">{.:ellipsis(10)}</option></tpl>‘,        ‘</select>‘    );    t.append(‘f‘, data);});

 

Ext.js入门：模板（三）


联系
我们