<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ext JS in Action Chapter 02 |Listing 2.3 Advanced XTemplate usage</title>
<link rel="stylesheet" type="text/css" href="./ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="./ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext3/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = './ext3/resources/images/default/s.gif';
</script>
<script type="text/javascript">
Ext.onReady(function() {
/**
* The purpose of this example is to demonstrate how to implement an Ext.XTemplate using inline methods. This
* implementation will loop through the cars array inside of each data object provided to the XTemplate. The
* nested if tag for the tpl element will execute the dynamically added isCamry method, which if true, will append
* "(same car)" to the text on screen.
*/
var tplData = [{
color : "#FFE9E9",
name : 'Naomi White',
age : 25,
dob : '03/17/84',
cars : ['Jetta', 'Camry', 'S2000', "M3"]
},{
color : "#E9E9FF",
name : 'John Smith',
age : 20,
dob : '10/20/89',
cars : ['Civic', 'Accord', 'Camry']
}];
var myTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="background-color: {color}; margin: 10px;">',
'<b> Name :</b> {name}<br />',
'<b> Age :</b> {age}<br />',
'<b> DOB :</b> {dob}<br />',
'<b> Cars : </b>',
'<tpl for="cars">',
'{.}',
'<tpl if="this.isCamry(values)">',
'<b> (same car)</b>',
'</tpl>',
'{[ (xindex < xcount) ? ", " : "" ]}',
'</tpl>',
'<br />',
'</div>',
'</tpl>',
{
isCamry : function(car) {
return car === 'Camry';
}
}
);
myTpl.compile();
myTpl.append(document.body, tplData);
});
</script></head>
<body>
</body>
</html>
分享到：
相关推荐
**Node.js-Back2Front基于Express和XTemplate的模块化开发框架** 在现代Web开发中，Node.js以其异步非阻塞I/O模型和高效的性能，成为构建后端服务的热门选择。Back2Front是一个利用Node.js的强大特性，结合Express...
利用模板（xtemplate）表格合并行 简单实现表格分组，单元格行的合并。
**XTemplate 模板引擎详解** XTemplate 是 KISSY 框架中的一个强大而灵活的模板引擎，主要用于生成动态HTML内容。它提供了一种高效、易读的方式来结合数据和视图，使得前端开发人员可以更专注于业务逻辑，而不是...
在本文中，我们将深入探讨如何使用ExtJS的XTemplate来实现多张图片的居中排版和自动缩放处理。ExtJS是一个强大的JavaScript框架，它提供了丰富的组件和模板功能，帮助开发者构建用户界面。XTemplate是ExtJS中的一个...
标题中的"LwIPv2.XTemplate(CMSISRTOS2)_Copy.7z"是一个包含轻量级互联网协议（LWIP）版本2.x的模板项目，它基于CMSIS-RTOS2（ARM公司提供的实时操作系统服务接口标准）进行了适配。这个项目是针对安富莱（Altium ...
xtemplate node.js是一个轻量级的JavaScript模板引擎，专为Node.js平台设计，用于处理和渲染模板文件。它允许开发者编写HTML模板文件，在其中插入动态内容。本文通过实例详细介绍了xtemplate在Node.js中的安装和使用...
亲吻xtemplate 用于 KISSY 的独立 XTemplate 编译器用法节点 var XTemplate = require ( 'kissy-xtemplate' ) ;new XTemplate ( ) . compileSync ( 'xxx.xtpl.html' , 'xxx.xtpl.js' ) ; 或使用异步版本： var ...
Ext.XTemplate是Ext JS框架中用于渲染数据到DOM元素的强大工具。它允许开发者使用模板语法来动态地构建HTML结构，并将数据绑定到这些结构中。在这个实例中，我们看到如何利用Ext.XTemplate来以树形结构展示省份和...
xtpl 和 xtemplate 的捆绑模块 特点 1 如果我们想使用xtpl ，我们还需要在 package.json 上安装独立的xtemplate 。 xtpl2只是将两个模块包装在一个包中。 特点 2 以另一种方式支持koa ，比如 var app = koa(); ...
任务-xtemplate KISSY XTemplate 编译器。 “xtemplate”任务 使用示例 var xtemplate = new ( require ( 'task-xtemplate' ) ) xtemplate . run ( inputs , options , logger ) 选项 选项.version 类型： string...
X模板一个用于管理HTML片段模板的简单Javascript库要查看运行中的XTemplate，请在浏览器中下载包并打开examples目录的文件，或者在上查看它。2015-09-12：V 1.5 在设置新语言时启用了自动翻译操作现在，翻译文件以...
模板浏览器和nodejs上的高速，可扩展模板引擎库。...安装资源（） 在浏览器上使用支持requirejs modulex kissy kissy画廊中文教程演示 在节点上使用请使用xtpl 贡献贡献 执照xtemplate是根据MIT许可发布的。
**XTemplate 开源模板引擎详解** XTemplate 是一个基于 XML 的高效、易用的模板引擎，主要用于构建动态 Web 页面和应用程序。它允许开发者将数据和视图逻辑分离，通过简单的 XML 结构定义模板，然后结合数据进行...
XTemplate是PHP的模板引擎，允许您将HTML代码分别存储到PHP代码中。 它具有许多有用的功能，但代码简短且经过高度优化。 代码存储在此处，其他内容则在http://www.phpxtemplate.org/上
STM32F103 串口环形缓队列程序，可用于串口大数据处理，简单易用，详见附档描述，注解详细，亲测可用，STM32F103 serial port ring queue program, can be used for serial port big data processing, easy to use, ...
围绕 xtemplate 引擎的 node.js 包装器（对于 Koa 2 更容易） 安装 # npm $ npm install koa-xtpl --save # or yarn $ yarn add koa-xtpl 用法 演示.xtpl < p> {{ title }} demo.js const path = require ( ...
ExtJS学习