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 ...
随机推荐
- OJ推荐【转】
来自:http://blog.csdn.net/zdp072/article/details/16207111 一. Online Judge简介: Online Judge系统(简称OJ)是一个在线 ...
- xml文件对应的DTD学习
DTD文件: 1.DTD文档主要由(元素,属性,实体,PCDATA,CDATA) 2.声明一个元素:<!ELEMENT 元素名称 (元素内容)> eg: <!ELEMENT pers ...
- python encode decode unicode区别及用法
decode 解码 encode 转码 unicode是一种编码,具体可以百度搜 # coding: UTF-8 u = u'汉' print repr(u) # u'\u6c49' s = u.en ...
- angularjs2 学习笔记（六） Form
Angular 2 Form表单 在angular2 form表单中我们需要了解表单数据绑定.数据验证.数据提交等内容,在下面的示例中并没有实际提交到后台,这部分内容在今后webapi中加以练习. 表 ...
- 6.24 AppCan移动开发者大会，我爱我家即将闪亮登场！
6.24 AppCan移动开发者大会进入倒计时,报名通道即将关闭! “6月24日, 2016AppCan移动开发者大会即将召开,以“平台之上,应用无限”为主题,1500位行业精英汇聚在此,重磅新品发布 ...
- 开发移动app与服务器端session的状态管理与交互
我们进行web开发的时候,一般使用cookie或session来保存用户的登录状态,通过检查cookie或session的数据来验证用户是否具有对某些需要登录的页面的访问权限,这一切都是通过浏览器来完 ...
- Ubuntu无值守安装mysql
1. 使用apt-get -d install 命令下载安装包, 其中-d表示下载不安装. 下载后的deb包放在/var/cache/apt/archives目录 2. 使用dpkg-preconfi ...
- windows phone 8.1 HttpWebRequest 请求服务器
public string SendGetRequest(string baseurl, string parameters) { string parassb = parameters; ) { b ...
- iOS学习之UI自定义cell
一.自定义Cell 为什么需要自定义cell:系统提供的cell满足不了复杂的样式,因此:自定义Cell和自定义视图一样,自己创建一种符合我们需求的Cell并使用这个Cell.如下图所示的这些Cell ...
- c/c++常用代码 -- ini文件操作
#pragma once #include <string> #include <sstream> typedef std::basic_string<TCHAR> ...