<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
		<script type="text/javascript" src="ExtJs/ext-all.js"></script>
		<script type="text/javascript" src="ExtJs/bootstrap.js"></script>
		<script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

    <script type="text/javascript">
			Ext.onReady(function(){
        var tpl1 = new Ext.XTemplate(
          '<table border=1 cellpadding=1 cellspacing=1>',
          '<tr><td width=90>姓名</td><td width=90>年纪</td></tr>',
          '<tpl for=".">',
          '<tr><td>{name}</td><td>{age}</td></tr>',
          '</tpl>',
          '</table>'
        );
        var tplData = [
          {name: '张三', age: 20},
          {name: '郴四', age: 12},
          {name: '五爷', age: 56},
          {name: '老炮', age: 34},
          {name: '学军', age: 22}
        ]
        tpl1.append('tpl-table1', tplData);

        var tpl2 = new Ext.XTemplate(
          '<table border=1 cellpadding=1 cellspacing=1>',
          '<tr><td width=90>姓名</td><td width=90>年纪</td><td width=90>公司</td></tr>',
          '<tpl for="emps">',
          '<tr><td>{name}</td><td>{age}</td><td>{parent.companyName}</td></tr>',
          '</tpl>',
          '</table>'
        );
        var tplData = {
          companyName: "ABC公司",
          emps:[
            {name: '张三', age: 20},
            {name: '郴四', age: 12},
            {name: '五爷', age: 56},
            {name: '老炮', age: 34},
            {name: '学军', age: 22}
          ]
        }
        tpl2.append('tpl-table2', tplData);
      });
    </script>
</head>
<body>
<div id='tpl-table1'></div>
<br>
<div id='tpl-table2'></div>
</body>
</html>

　　

ExtJs之Ext.XTemplate:数组填充，访问父对象的更多相关文章

  1. ExtJs之Ext.XTemplate:模板成员函数

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  2. javascript --- 子对象访问父对象的方式

    在传统面向对象的编程语言里,都会提供一种子类访问父类的特殊语法,引文我们在实现子类方法往往需要父类方法的额外辅助.在这种情况下,子类通常会调用父类中的同名方法,最终以便完成工作. javascript ...

  3. ExtJs4 笔记（4） Ext.XTemplate 模板

    ExtJs4 笔记(4) Ext.XTemplate 模板 摘自:http://www.cnblogs.com/lipan/ 本篇将涉及到ExtJs中一个重要的概念,模板.话说Razor很神奇,但是我 ...

  4. [转载]ExtJs4 笔记（4） Ext.XTemplate 模板

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  5. ExtJS学习-----------Ext.Object，ExtJS对javascript中的Object的扩展

    关于ExtJS对javascript中的Object的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...

  6. ExtJs之Ext.view.View

    要注意MODEL的定义和实例化的代码,注释掉的是老式的不兼容4.0以上的.而下面的定义才是新推荐的. 我网上可是查的了.是书上的代码老了. <!DOCTYPE html> <html ...

  7. iframe里访问父级里的方法属性

    window.parent.attributeName;  // 访问属性attributeName是在父级窗口的属性名 window.parent.Func();  // 访问属性Func()是在父 ...

  8. JavaScript从父页面获取子页面的值（子页面又如何访问父页面）

    之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...

  9. angularjs 嵌套控制器，子控制器访问父控制器

    <pre> http://www.lovelucy.info/understanding-scopes-in-angularjs.html http://blog.csdn.net/jfk ...

随机推荐

  1. 为大家推荐一本书《jQuery Mobile 即学即用》

    这是人民邮电出版社出版的一本面向前端开发者的书. 非常喜欢书名"即学即用"这是每一个程序开发者的理想模式. 不同国家的人有不同的思维方式.这本书的作者是 [阿根廷] Maximil ...

  2. MEAN框架介绍

    近期在Angular社区的原型开发人员间.一种全Javascript的开发架构MEAN正突然流行起来.其首字母分别代表的是:(M)ongoDB--NoSQL的文档数据库,使用JSON风格来存储数据,甚 ...

  3. 7种炫酷HTML5 SVG液态水滴融合分解动画特效

    这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合分解动画特效.这些SVG动画特效使一些HTML元素.如菜单.分页button.APP.选择框等元素的过渡动画像几粒水滴一样融合分解.效果很的酷 ...

  4. Node.js：Strea

    ylbtech-Node.js:Stream 1.返回顶部 1. Node.js Stream(流) Stream 是一个抽象接口,Node 中有很多对象实现了这个接口.例如,对http 服务器发起请 ...

  5. 28. Implement strStr()[E]实现strStr()

    题目 Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if need ...

  6. 2015 多校赛 第一场 1007 (hdu 5294)

    总算今天静下心来学算法.. Description Innocent Wu follows Dumb Zhang into a ancient tomb. Innocent Wu’s at the e ...

  7. D - Knight Tournament（set）

    Problem description Hooray! Berl II, the king of Berland is making a knight tournament. The king has ...

  8. Linux vi命令快操作汇总

    第一部份:一般指令模式可用的按钮說明,游标移动.复制粘贴.搜寻取代等 一.移动游标的方法h 或 向左方向鍵(←) 游标向左移动一个字节j 或 向下方向鍵(↓)   游标向下移动一个字节k 或 向上方向 ...

  9. Qt5—嵌入停靠窗口QDockWidget

    参考链接:http://blog.csdn.net/summer_xiyer/article/details/12875899 新建一个GUI工程: QDockWidget是QWidget的子类,也等 ...

  10. C++文本操作.Vs.Python

    C++利用文件流: (1):读取一个字符 std::string TestTxt(argv[3]); // freopen(TestTxt.c_str(),"r",stdin);/ ...