<!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. 【cl】selenium实例一：打开百度，获取第四个标题

    /*创建类的时候是TestNG Class*/ package Selenium_lassen; import static org.junit.Assert.*; import java.util. ...

  2. Tomcat容器 web.xml具体解释

    <init-param> <param-name>debug</param-name> <param-value>0</param-value&g ...

  3. 如何让 ssh 允许以 root 身份登录

    默认情况下,Pack 上的 root 用户不能用通过密码来远程登录,可以用一下命令来做:(注意要在 root 权限下) sed -i 's/PermitRootLogin\swithout-passw ...

  4. <vim实用技巧>学习笔记

    第三章插入模式 1.插入模式下的删除  2.返回普通模式                                 3.复制 yt, //复制当前光标到逗号(,)之前的内容 第四章 可视模式 1 ...

  5. vim分屏功能

    转载,来自http://coolshell.cn/articles/1679.html 本篇文章主要教你如何使用 Vim 分屏功能. 分屏启动Vim 使用大写的O参数来垂直分屏. vim -On fi ...

  6. Swift3.0 split函数切割字符串

    我们先看函数的原型: public func split(separator: Self.Iterator.Element, maxSplits: Int = default, omittingEmp ...

  7. 写一个类似淘宝的ios app需要用到哪些技术？

    写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...

  8. 【Codeforces 258B】 Sort the Array

    [题目链接] http://codeforces.com/contest/451/problem/B [算法] 模拟 在序列中找到一段单调递增的子序列,将这段序列反转,然后判断序列是否变得单调递增,即 ...

  9. ubuntu系统源的更新

    以前没有注意,ubuntu的系统的源原来每次在GUI操作后都会追加在后面而不是覆盖,比如先添加了上海交大的源那么后来如果发现很慢下载不了,而这个包已经在apt-cache里面了,下次如果要instal ...

  10. VS中的路径宏

    说明$(RemoteMachine)设置为“调试”属性页上“远程计算机”属性的值.有关更多信息,请参见更改用于 C/C++ 调试配置的项目设置.$(References)以分号分隔的引用列表被添加到项 ...