<!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. Codeforces 115A- Party（DFS）

    A. Party time limit per test 3 seconds memory limit per test 256 megabytes input standard input outp ...

  2. 关于View的ScrollTo， getScrollX 和 getScrollY

    下载地址:源代码 当利用 Scroller 去滑动屏幕或者扩展 ScrollView 的时候,总是会用到 getScrollX 和 getScrollY 去获取当前View 滑动到的位置,那么getS ...

  3. Oracle 11gR2 List-Range分区实验

    一.实验目的 採用List-Range分区,对主分区指定表空间或者对子分区指定表空的不同情况,測试例如以下内容: 1.对List主分区不指定表空间.对Range子分区指定表空间,数据实际存储在哪个表空 ...

  4. YII用户注冊和用户登录（三）之模型中规则制定和分析

    3 模型中规则制定和分析 YII模型主要分为两类,一个数据模型,处理和数据库相关的增删改查.继承CActiveRecord.还有一个是表单模型,继承CFormModel.不与数据库进行交互.操作与数据 ...

  5. Warning: File `src/core/nginx.h&#39; has modification time 1.2e+07 s in the future

    Nginx安装时Warning: File `src/core/nginx.h' has modification time 1.2e+07 s in the future问题的解决方法 问题场景: ...

  6. bzoj4956: [Wf2017]Secret Chamber at Mount Rushmore

    F......loyd? 这范围也是..... 然而大了也不会.... #include<cstdio> #include<iostream> #include<cstr ...

  7. 【IOI 1994】 The Buses

    [题目链接] http://poj.org/problem?id=1167 [算法] 深度优先搜索 + 迭代加深 [代码] #include <algorithm> #include &l ...

  8. 数组、链表、栈、队列和STL

    数组 数组是一种最基本的数据结构,它是内存上的一块连续存储空间.正因如此数组的随机访问很方便.但数组也有其固有的限制,大小分配后不能改变. STL中的数组 STL中的Array是静态数组模板,就是我们 ...

  9. BZOJ 1018 线段树维护图的连通性问题

    思路: 我们可以搞一棵线段树 对于一段区间有6种情况需要讨论 左上右下.左上右上.左下右下.左下右上 这四种比较好维护 用左上右下举个例子吧 就是左儿子的左上右下&左区间到右区间下面有路&am ...

  10. 控件——DataGridview

    控件:DataGridview    用来显示数据,      可以显示和编辑来自多种不同类型的数据源的表格数据. 一.两种显示数据的方式:手动,后台代码 主要通过后台代码:先建立三大类   然后绑定 ...