1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>ExtJs</title>
  5. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.     <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
  7. 		<script type="text/javascript" src="ExtJs/ext-all.js"></script>
  8. 		<script type="text/javascript" src="ExtJs/bootstrap.js"></script>
  9. 		<script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
  10.  
  11.     <script type="text/javascript">
  12. 			Ext.onReady(function(){
  13.         var tpl1 = new Ext.XTemplate(
  14.           '<table border=1 cellpadding=1 cellspacing=1>',
  15.           '<tr><td width=90>姓名</td><td width=90>年纪</td></tr>',
  16.           '<tpl for=".">',
  17.           '<tr><td>{name}</td><td>{age}</td></tr>',
  18.           '</tpl>',
  19.           '</table>'
  20.         );
  21.         var tplData = [
  22.           {name: '张三', age: 20},
  23.           {name: '郴四', age: 12},
  24.           {name: '五爷', age: 56},
  25.           {name: '老炮', age: 34},
  26.           {name: '学军', age: 22}
  27.         ]
  28.         tpl1.append('tpl-table1', tplData);
  29.  
  30.         var tpl2 = new Ext.XTemplate(
  31.           '<table border=1 cellpadding=1 cellspacing=1>',
  32.           '<tr><td width=90>姓名</td><td width=90>年纪</td><td width=90>公司</td></tr>',
  33.           '<tpl for="emps">',
  34.           '<tr><td>{name}</td><td>{age}</td><td>{parent.companyName}</td></tr>',
  35.           '</tpl>',
  36.           '</table>'
  37.         );
  38.         var tplData = {
  39.           companyName: "ABC公司",
  40.           emps:[
  41.             {name: '张三', age: 20},
  42.             {name: '郴四', age: 12},
  43.             {name: '五爷', age: 56},
  44.             {name: '老炮', age: 34},
  45.             {name: '学军', age: 22}
  46.           ]
  47.         }
  48.         tpl2.append('tpl-table2', tplData);
  49.       });
  50.     </script>
  51. </head>
  52. <body>
  53. <div id='tpl-table1'></div>
  54. <br>
  55. <div id='tpl-table2'></div>
  56. </body>
  57. </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. JavaScript中bind、call、apply函数使用方法具体解释

    在给我们项目组的其它程序介绍 js 的时候,我准备了非常多的内容,但看起来效果不大,果然光讲还是不行的,必须动手. 前几天有人问我关于代码里 call() 函数的使用方法.我让他去看书,这里推荐用js ...

  2. python中获取当前路径【os模块】

    本机windows,文件目录F:\python\ClStudyDemo\osTest.py os.path.realpath(_file_)——返回真实路径 os.path.split()——返回路径 ...

  3. android监听虚拟按键的显示与隐藏【转】

    本文转载自:http://blog.csdn.net/u014583590/article/details/55263141 虚拟按键在华为手机中大量存在,而虚拟按键的存在无疑增加了屏幕适配的难度,往 ...

  4. git window端工具之sourcetree使用

    https://www.jianshu.com/p/3478e2a214a1

  5. 开发辅助 | 阿里图标库iconfont入门使用

    目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...

  6. 图片全屏轮播插件poposlides

    jQuery轻量级全屏自适应焦点图插件poposlides 在线演示本地下载

  7. 高德地图修改gps定位点样式

    效果图 navi_map_gps_locked.png 图片1 图片2 修改 MyLocationStyle myLocationStyle = new MyLocationStyle();//初始化 ...

  8. textarea 自适应高度

    试了好多方法,包括百度了好多.一旦接口获取的内容,就不好用了.有时候就是脑袋转不过来,想了好久的方法居然那么简单,然后,脑洞大开,忽然想到还可以这样弄, 很简单,两句话 var textareaHei ...

  9. 系统A一定会按照自我的样子改造世界

    A一定会按照自己的样子去构建系统A1,A1一定还会按照自己的样子去构建系统A1.1,A1.1一定还是会按照自我的样子去构建A1.1.1……我们编程,我们改造世界,我们的方向是被注定要朝着构建人造人的方 ...

  10. CorelDRAWX8新功能摆脱传统工作模式

    最近,有一则好消息CorelDRAW X8特惠啦!功能不少价格却不高的CDR X8很快成了设计师们的新宠,三折之后你动心了么? 点击这里了解更多.. 那么CDR X8到底有何功能和亮点呢? 完全可自定 ...