ExtJs2 0学习系列 11 --Ext XTemplate

qq_44910624

于 2019-04-21 10:51:17 发布

阅读量111

点赞数

本文链接：https://blog.csdn.net/qq_44910624/article/details/89429617

版权

本文介绍了ExtJS中的XTemplate组件，通过实例展示了如何使用XTemplate呈现静态和服务器数据，包括从数据库获取数据并展示的步骤，以及如何进行简单的查询操作。最后预告了接下来将探讨TreePanel的相关内容，并推荐了一个学习资源。

摘要由CSDN通过智能技术生成

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

js代码:

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);
})

简要说明:

/*
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.compile();
    tpl.overwrite(mypanel.body,data);
*/
1 .tpl.compile(); // 可以在创建模板后,添加tpl.compile();编译代码,速度快点.
2 . tpl.overwrite(mypanel.body,data); // 把数据填充到模板中去,并呈现到目标组件
3 .名称:{name} // 对于一维单数据对象,直接用{名称}输出,
4 ., < tpl for = " read " > // 对于多维对象(如拥有多条数据的表),使用tpl和for配合使用,会使用tpl的格式把数据一条一条输出,read为上级节点
5 .{.} // 对于一维对数据的对象,如color: ['Red', 'Blue', 'Black'],可以用{.}按照tpl模板逐一输出,如:
    ' <tpl for="color"> ' ,
        ' <div> {.}</div> ' ,
     ' </tpl> '
6 .{#} // 表示循环的索引
7 .parent. *** // 在子对象中访问父对象元素,使用parent,如:{parent