<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ext JS in Action Chapter 02</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" src="./helloXTemplate.js"></script>
</head>
<body>
</body>
</html>
Ext.onReady(function() {
var tplData = [{
color : "#FFE9E9",
name : 'Naomi White',
age : 25,
dob : '03/17/84',
cars : ['Jetta', 'Camry', 'S2000']
},{
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 />',
'</div>',
'</tpl>'
);
myTpl.compile();
myTpl.append(document.body, tplData);
});
分享到：
相关推荐
本人觉得Ext.Template和Ext.XTemplate模板类非常类似.Net的母板页，或者非常类似于JSP技术中jstl标准标签和EL表达式功能；但是它是一个客户端的技术。 阅读目标：需要使用模板方式来开发web应用的人员。 前置条件：...
### 使Ext的Template可以解析二层的json数据的方法 #### 概述 在使用Ext框架中的`Template`类时，经常会遇到需要处理多层嵌套的JSON数据的情况。默认情况下，`Template`只能直接访问一层JSON数据中的键值对。然而...
3. **Ext类**： `EXT核心API详解(一) - Ext类.txt`介绍了Ext的基础类，包括`Ext.util.Observable`（观察者模式的实现）、`Ext.app.Application`（管理应用生命周期）等。理解这些类的用法对于构建可维护的应用至关...
"EXT核心API详解(四)-Ext.DomQuery DomHelper Template.txt"介绍了Ext.DomQuery，这是一个高效的DOM选择器引擎，类似于jQuery的$.selector。DomHelper则是用于创建和操作DOM结构的工具，而Template则是用于动态生成...
9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext.EventObject类 ………………… 15 13、Ext.CompositeElement类 ………… 16 14、...
"EXT核心API详解(四)-Ext.DomQuery DomHelper Template.txt"介绍了Ext.DomQuery，这是一个强大的CSS选择器引擎，类似于jQuery的选择器，用于高效地选取DOM元素。DomHelper则是一个便捷的DOM元素构建工具，可以生成...
3. **Store**：Store是EXT中管理数据的核心组件，它链接到数据源（如服务器），负责加载、缓存和处理数据。在"增删改查"操作中，Store会触发加载、添加、删除和更新数据的事件。 4. **Grid**：EXT Grid是展示表格...
1.2. 看看ext-1.1.1的文档 1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果？ 1.5. 为什么自己按照例子写的代码，显示出来总找不到图片 1.6. 我们还需要什么？ 1.7. 入门之前，都看hello...
Ext的基础知识点包括元素获取方法Ext.get、动态生成HTML的DomHelper和Template、以及数据处理相关的Ext.data命名空间中的proxy和reader系列。Ext对JSON格式的支持也很到位，提供了方便的API来加载和解析JSON数据。 ...
3. **基本数据类型扩展**：EXT JS扩展了JavaScript的基本数据类型，如Array、Date、Function和Number。例如，`Array`增加了一些便利的方法，如`Array.each`进行数组遍历，`Array.indexOf`查找元素索引，`Array....
"chrome-ext-template" 是一个基于JavaScript的Chrome浏览器扩展模板项目，它为开发者提供了一个基础框架，用于快速构建自己的Chrome浏览器插件。这个压缩包文件"chrome-ext-template-master"很可能包含了项目的所有...
1.2. 看看ext-2.0.2的文档 1.3. 为什么有的例子必须放在服务器上才能看到效果？ 1.4. 为什么自己按照例子写的代码，显示出来总找不到图片 1.5. 我们还需要什么？ 1.6. 入门之前，都看helloworld。 1.6.1. 直接使用...
3. `createTemplate(Object o) : Ext.Template`：根据`o`创建一个新的`Ext.Template`对象，用于生成HTML片段。 4. `insertAfter(Mixed el, Object o, [Boolean returnElement]) : HTMLElement/Ext.Element`：在`el`...
此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的，并且还涉及了模板（Template）的使用、ColumnModel 的配置以及数据绑定等关键概念。 ### 一、Ext JS Grid 概览 Ext JS 是一个...
为了不干扰系统自带的布局，我们可以创建一个扩展文件liferay-layout-templates-ext.xml，并在这个文件中声明我们的1_2_3_2_columns.tpl布局。例如： ```xml <layout-template-key>1_2_3_2_columns</layout-...
7. **模板（Template）**：对于下拉树的展示，可能需要自定义模板来决定节点在下拉列表中的显示方式。 8. **API调用**：EXT JS提供了丰富的API接口，如expandAll()用于展开所有节点，collapseAll()用于折叠所有节点...
3. **事件监听**：当用户点击某个月份时，需要添加监听器来捕获这一事件，并执行相应的处理，比如设置选择的月份值。 4. **配置选项**：为了提高灵活性，自定义组件通常会提供一些配置项，允许用户定制其外观和行为...