<!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. android 构建GPS Provide步骤及信息

    构建GPS Provide步骤及信息 1.   用GPS2GoogleEarth录制KML文件 2.   KML文件 2.1 经纬度解析 <LineString> <coordina ...

  2. sql server中的悲观锁和乐观锁

    https://www.cnblogs.com/chenwolong/p/Lock.html https://www.cnblogs.com/dengshaojun/p/3955826.html ht ...

  3. [APIO 2010] 巡逻

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1912 [算法] 树的直径 [代码] #include<bits/stdc++. ...

  4. (Go)02.go 安装delve调试工具测试

    安装调试工具 go get github.com/derekparker/delve/cmd/dlv 增加断点调试 调试--->启动调试

  5. My first blog for java

    我的第一个java程序: package com.hellojava; /** * @author 沽-名-钓-誉 */ public class HelloJava{ /** * @param 输出 ...

  6. Mac OS X10.9安装的Python2.7升级Python3.4步骤详解

    Mac OS X10.9安装的Python2.7升级Python3.4步骤详解 Mac OS X10.9默认带了Python2.7,不过现在Python3.4.0出来了,如果想使用最新版本,赶紧升级下 ...

  7. python里使用reduce()函数

    reduce()函数在库functools里,如果要使用它,要从这个库里导入.reduce函数与map函数有不一样地方,map操作是并行操作,reduce函数是把多个参数合并的操作,也就是从多个条件简 ...

  8. 使用NPOI实现简单的Excel导出功能

    [1]NPOI是啥? NPOI是指构建在POI 3.x版本之上的一个程序,NPOI可以在没有安装Office的情况下对Word或Excel文档进行读写操作. POI是一个开源的Java读写Excel. ...

  9. canvas动画简单操作

    canvas动画 小球滚动效果 关键api: window.requestAnimationFrame(draw) 会递归调用draw函数,替代setInterval var x = 20; var ...

  10. 四.Windows I/O模型之重叠IO(overlapped)模型

    1.适用于除Windows CE之外的各种Windows平台.在使用这个模型之前应该确保该系统安装了Winsock2.重叠模型的基本设计原理是使用一个重叠的数据结构,一次投递一个或多个Winsock ...