sencha Touch 2.4 学习之 XTemplate模板
XTemplate模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../touch/resources/css/sencha-touch.css">
<script type="text/javascript" src="../touch/sencha-touch-all-debug.js"></script>
<title>DEMO</title>
<script type="text/javascript">
Ext.onReady(function() {
//数据源
var data = {
name: 'Tommy Maintz',
title: 'Lead Developer',
company: 'Sencha Inc.',
email: 'tommy@sencha.com',
address: '5 Cups Drive',
city: 'Palo Alto',
state: 'CA',
zip: '44102',
drinks: ['Coffee', 'Soda', 'Water'], kids: [{
name: 'son1',
age:3 ,
sunzi : [{name : 'sunzi1'},{name:'sunzi2'}]
},{
name: 'son2',
age:2 ,
sunzi : [{name : 'sunzi3'},{name:'sunzi4'}]
},{
name: 'son3',
age:0 ,
sunzi : [{name : 'sunzi5'},{name:'sunzi6'}]
}]
}; //呈现组件
var mypanel = new Ext.Panel({
id: "mypanel",
width: 300,
frame: true,
height: 100,
title: "XTemplate简单示例",
renderTo: Ext.getBody()
});
/*
//创建模板
var tpl = new Ext.XTemplate(
'<p>Kids: ',
'<tpl for="kids.sunzi">', // process the data.kids node
'<p>{#}. {name}</p>', // use current array index to autonumber
'<p>Dad: {parent.name}</p>',
'</tpl></p>'
); */ //创建模板
var tpl = new Ext.XTemplate(
'<p>Me: ',
'<tpl for=".">', // data
'<p>{#}. {name}</p>',
'<tpl for="kids">', // kids me
'<p>----son: {name}</p>', // som
'<p>----Dad: {parent.name}</p>',
'<tpl for="sunzi">',//sunzi
'<p>------sunzi: {name}</p>',
'<p>------Dad: {parent.name}</p>',
'</tpl>',
'</tpl>', '<p>Yeye: {parent.name}</p>', //yeye
'</tpl></p>'
); //重写绑定模板
tpl.overwrite('tpl', data); // pass the kids property of the data object }); </script>
</head>
<body>
<div id="tpl"> </div>
</body>
</html>
效果：
代码主要是介绍下，XTemplate的循环嵌套处理。
下面介绍一下 XTemplate 常用的方法：
参考：
http://www.cnblogs.com/FredTang/archive/2012/08/09/2629991.html
http://blog.sina.com.cn/s/blog_667ac0360102ede0.html
sencha Touch 2.4 学习之 XTemplate模板的更多相关文章
- Sencha Touch 2.1学习图表Chart概述
Extjs.chart提供了可视化展现数据的能力,每个图表可以绑定到数据模型Ext.data.Store上, 并随着数据的变换可以自动的更新图表 一个图表对象包括图标风格.坐标(axes).序列(se ...
- 关于sencha touch 的JSONP跨域请求的学习研究
此篇文章是对自己在研究学习sencha touch的过程中的点滴记录,主要是JSONP的跨域请求这方面,对于何为是跨域概念还有不熟悉的,可以自己问下度娘. 先上张图: 我要完成的功能就是表格下拉刷新, ...
- sencha touch 入门学习资料大全(2015-12-30)
现在sencha touch已经更新到2.4.2版本了 重新整理一下资料 官方网站:http://www.sencha.com/products/touch/ 在线文档:http://docs.sen ...
- sencha touch 入门学习资料大全
现在sencha touch已经更新到2.3.1版本了 重新整理一下资料 官方网站:http://www.sencha.com/products/touch/ 在线文档:http://docs.sen ...
- XTemplate模板学习和使用总结
XTemplate模板学习和使用总结 前言 XTemplate是我接触的第一个模板语言,用在公司的一个NodeJS项目中,跟它打交道经常是因为需要使用它的语法向模板中注入数据.因为是刚入门前端不久 ...
- 39.VUE学习--组件,子组件中data数据的使用,x-template模板的使用,改变for循环里的某条数据里的值
多处引用相同组件时,操作data不会相互影响 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- HTML5开发移动web应用——Sencha Touch篇(8)
DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,能够讲不论什么数据以形象的方式展示给用户. 眼下,怎样更好地可视化是很多公司或框架都在追求的. ...
- Sencha Touch 手机移动开发框架 HTML5 项目压缩方案;
Sencha Touch框架生成基本项目目录结构 Index.html/ App.js App.json /touch[sdk]/ /Sencha-touch.js /src Resources/ A ...
- [Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容
原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cord ...
随机推荐
- 部署到iis后，发现无法加载运行CSS文件
解决方法: 打开或关闭window功能中的Internet信息服务里的万维网服务=>常见HTTP功能=>静态内容
- MIFARE系列2《非接触卡标准》
根据信号发送和接收方式的不同,ISO/IEC14443-3定义了TYPEA.TYPEB两种卡型.它们的不同主要在于载波的调制深度及二进制数的编码方式.从读写机具向卡传送信号时,二者是通过13.56Mh ...
- ORA-14099 错误解决
DB: 11.2.0.3.0 在测试把普通表修改为交换分区的时候,出现ORA-14099: all rows in table do not qualify for specified partiti ...
- JVM学习总结四——内存分配策略
之前几篇我们介绍了jvm的内存模型以及垃圾回收机制,而本篇我们将介绍几个JVM中对象在分配内存是应该遵循的策略.毕竟,想要去优化程序,不仅要考虑垃圾回收的过程,还要从对象内存分配的角度减少gc的代价. ...
- SQL Server数据库学习笔记-设计表时应该考虑的因素
设计数据库其实就是设计数据库中的表.到底要注意些什么才能够设计好一个数据库呢?一个宗旨,8个建议. 一个宗旨“尽量少的表,每个表中尽量少的列,合理的表结构”. 8个建议: 第一个,首先要考虑的是咱们这 ...
- Linux rsync 同步
rsync 是一个快速增量文件传输工具,它可以用于在同一主机备份内部的备分,我们还可以把它作为不同主机网络备份工具之用.本文主要讲述的是如何自架rsync服务器,以实现文件传输.备份和镜像.相对tar ...
- Mysql去除重复
常用的有两种方法,第一种就是select distinct name from table.但是有时候我们要返回多个字段时就用第二种方法select *, count(distinct name) f ...
- UIImageView swift
// // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...
- 设置VS2010中自带的ActiveX控件测试容器TstCon
ActiveX控件:可以看做一个极小的服务器应用程序,他不能单独运行,需要嵌入到某个程序中才可以运行,我们可以自己写一个程序来测试自己写的程序(具体方法在下一篇文章阐述),第二种方法是利用VS(本人编 ...
- NET Core静态文件的缓存方式
NET Core静态文件的缓存方式 阅读目录 一.前言 二.StaticFileMiddleware 三.ASP.NET Core与CDN? 四.写在最后 回到目录 一.前言 我们在优化Web服务的时 ...