<!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. 什么是Spark？

    什么是Spark Spark是一个基于内存计算的开源的集群计算系统,目的是让数据分析更加高速.Spark很小巧玲珑,由加州伯克利大学AMP实验室的Matei为主的小团队所开发. 使用的语言是Scala ...

  2. 使用UIScrollView和UIPageControl做一个能够用手势来切换图片的效果

    利用UIScrollView的滚动效果来实现,先上图: 实现过程是:在viewController里先增加UIScrollView和UIPageControl: -(void) loadView { ...

  3. sql系列（基础篇）-前言 课前补充知识

    前言 课前补充知识 Number(p,s) Number(p,s):数字类型,p 表示数字的有效长度(从数字的左边第 1 位不为 0 的開始算起,直到最右边的长度.取值范围 0~38 位),s 表示数 ...

  4. bzoj2958: 序列染色(DP)

    2958: 序列染色 题目:传送门 题解: 大难题啊(还是我太菜了) %一发大佬QTT 代码: #include<cstdio> #include<cstring> #incl ...

  5. ROS单线多拨pppoe

    #设置内网IP地址 / ip add add interface=ether1 address=192.168.0.254/255.255.255.0 #设置共享上网 / ip firewall na ...

  6. redis安装及连接（入门）

    安装 环境:本地win10,虚拟机里ubuntu, 在ubuntu安装redis服务,本地java连接. 本教程使用的最新文档版本为 4.0.9,下载并安装: 安装步骤: 1,进入ubuntu合适目录 ...

  7. mysql查询orderby

    --按某一字段分组取最大(小)值所在行的数据 /* 数据如下: name val memo a    2   a2(a的第二个值) a    1   a1--a的第一个值 a    3   a3:a的 ...

  8. mod_wsgi 初体验

    1, 安装 ./configure --with-apxs=/usr/local/apache2/bin/apxs --with-python=/usr/bin/python3 make && ...

  9. Arduino-OLED-四度显示

    double Fahrenheit(double celsius) { ; } //摄氏温度度转化为华氏温度 double Kelvin(double celsius) { return celsiu ...

  10. canvas的常用api

    canvas 标签 <canvas width="600" height="400" id="canvas"></canv ...