ExtJs2.0学习系列(11)--Ext.XTemplate

nxyc_twz

XTemplate是Extjs里面的模板组件.
下面我们看个最简单的例子.
效果图:

js代码:
<div class="cnblogs_code"><!---->Ext.onReady(function(){
    //数据源
    var data={
       name:"博客园",
       read:[{
           book:'<<道不远人>>',
           date:'2007-7-7'
       },{
           book:"<<大话设计模式>>",
           date:"2006-6-6"
       }]
    }
    //呈现组件
    var mypanel=new Ext.Panel({
      width:400,
      id:"mypanel",
      title:"XtemplateData简单示例",
      renderTo:Ext.getBody()
    });
    //创建模板
    var tpl=new Ext.XTemplate(
        '<table><tr><th>名称:{name}</th></tr>',
        '<tr><td>',
        '<tpl for="read">',
             '<p>编号:{#},书:{book},日期:{date}</p>',
        '</tpl></td></tr></table>'
    );
    //重写绑定模板
    tpl.overwrite(mypanel.body,data);
})