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 ...
随机推荐
- 什么是PHP魔术引号
今天在读EcShop的源码中发现里面有几个地方涉及到了PHP魔术引号,之前也碰到过都忽略过去了,再次碰到该深入的理解,虽然自PHP 5.3.0 起魔术引号被废弃废弃并将自 PHP 5.4.0 起移除, ...
- 复习后台代码(与前面clentHttp连接网络结合)
package com.zzw.LoginServelt; import java.io.IOException; import java.io.PrintWriter; import javax.s ...
- 表格控件表头栏目(Column)与数据表头步
不用手工增加栏目的列,也就是Column,由数据库的查询结果自动创建. 用的是Delphi2010,安装了Dev,用CxGrid显示数据库查询结果.用什么控件没有关键,道理相同的.
- PropertyGrid 控件使用方法
编写一个对象,后面传递给 PropertyGrid 来显示: using System; using System.Collections.Generic; using System.Linq; us ...
- 使用 Attribute +反射 来对两个类之间动态赋值
看同事使用的 一个ORM 框架 中 有这样一个功能 通过特性(附加属性)的功能来 实现的两个类对象之间动态赋值的 功能 觉得这个功能不错,但是同事使用的 ORM 并不是我使用的 Dapper 所 ...
- AngularJs记录学习04
<html> <head> <title>Angular JS Views</title> <script src="js/Angula ...
- SublimeText插件Emmet的自定义模板
在前端界,作为快速生成代码的Emmet插件相当给力.最近在学bootstrap,需要频繁生成html头文件,我就想着自定义模板.国内只有基础教程,只好自己读英文文档了. Emmet国内基础教程地址: ...
- JVM学习总结四——内存分配策略
之前几篇我们介绍了jvm的内存模型以及垃圾回收机制,而本篇我们将介绍几个JVM中对象在分配内存是应该遵循的策略.毕竟,想要去优化程序,不仅要考虑垃圾回收的过程,还要从对象内存分配的角度减少gc的代价. ...
- (转)android Fragments详解三:实现Fragment的界面
为fragment添加用户界面 fragment一般作为activity的用户界面的一部分,把它自己的layout嵌入到activity的layout中. 一个 要为fragment提供layo ...
- 实体框架 (EF) 入门 => 一、我该用哪个工作流?
入门的参考资料:http://msdn.microsoft.com/zh-cn/data/ee712907 本篇的参考资料:http://msdn.microsoft.com/zh-cn/data/j ...