今天用Extjs Template做了两个小例子嘿
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Button</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.7-commercial/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js"></script>
</head>
<body>
<div id="template1"></div>
<div id="template2"></div>
<script type="text/javascript">
<!--
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: 'Joshua',
age:3
},
{
name: 'Matthew',
age:2
},
{
name: 'Solomon',
age:0
}]
};
var tpl = new Ext.XTemplate(
'<p>Kids: ',
'<tpl for=".">',
'<p>{#}. {name}</p>',
'</tpl></p>'
);
tpl.overwrite("template1", data.kids);
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Title: {title}</p>',
'<p>Company: {company}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<p>{name}</p>',
'</tpl></p>'
);
tpl.overwrite("template2", data);
//-->
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Button</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.7-commercial/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js"></script>
</head>
<body>
<div id="template1"></div>
<div id="template2"></div>
<script type="text/javascript">
<!--
var container = Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items : [{
xtype: 'button',
text : 'My Button'
}]
});
var t = new Ext.Template("<div>Hello {0}.</div>");
t.append(container.getEl(), ['foo']);
var t = new Ext.Template([
'<div name="{id}">',
'<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
'</div>',
]);
t.compile();
t.append('template2', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
//-->
</script>
</body>
</html>
分享到：
相关推荐
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
标题中的"Extjs4.1 小例子"意味着这个压缩包包含了一些基础的示例代码，旨在帮助初学者快速入门。通过这些小例子，你可以了解如何使用ExtJS 4.1来创建用户界面，包括布局管理、组件系统、数据绑定、事件处理等核心...
标签 "EXTJS 抽奖" 暗示着这个例子结合了 EXTJS 的前端开发技术和抽奖的业务逻辑。开发者可以从中学习如何将EXTJS的组件、事件处理和动画功能整合起来，实现一个实际的功能模块。 总的来说，EXTJS 的这个小抽奖例子...
这里面有三个extjs的小例子，其中testb.html和testc.html所实现的效果是一样的，只不过testb.html里面的控件全是用extjs创建的，而testc.html是extjs与jsp的结合。例子很简单，主要记录自己每天的成长经历！
Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子
标题"EXTJS小例子"可能是指一个包含EXTJS基本使用示例的项目，帮助初学者理解EXTJS的工作原理和基本用法。这个项目可能包含了一些简单的EXTJS代码片段，演示了如何创建和配置EXTJS组件，以及如何组织和布局页面。 ...
ExtJs4 详细、讲解例子，网上搜索的一些例子，拉下来的
Extjs Extjs4.2.1 入门小例子 test1.jsp test2.jsp test3.jsp
新手学习，初学extjs时用刚刚好，里边有三个例子，还有一个我自己写的例子（简单粗暴动态菜单），还有一个中文API
ssh + extjs 4登录的小例子（前后台代码）
在这个例子中，我们将关注以下关键知识点： 1. **EXTJS TreePanel 基础** - TreePanel 是EXTJS中用于展示树形结构的组件，它可以异步加载数据，支持节点的拖放操作。 - `AsyncTreeNode` 是用于异步加载数据的节点...
ExtJs 3.1 框架的小例子合集源代码，EXT主库需远程调用，部分代码还有些错误，可能是EXT调用的问题，研究过EXT的应该很容易就修正，不懂的朋友就当是了解一些前奏知识吧，必竟EXT相对来说是比较复杂的，在界面方面...
在这个"SSH+ExtJs分页小例子"中，我们将探讨如何将这两种技术结合实现数据分页显示。 首先，我们来看NewsDAO.java文件。这个文件包含了两个关键方法：`findPageAll`和`totalRecord`。`findPageAll`方法实现了分页...
extjs4是权限 网络分享资料中修改而来。 extjs4+ spring3 + hibernate3.3+ struts2.1.8 + mysql5.04+ xp + myEclipse 8.5 测试通过 。 extjsdemo.rar
这个压缩包中的"ExtJs 3.1的一些小例子源代码"提供了一系列实际应用的示例，可以帮助开发者更好地理解和学习ExtJs 3.1版本的核心功能和特性。 1. **ExtJs 3.1概述** ExtJs 3.1是该框架的一个重要版本，它包含了...
Extjs3.1例子源代码Extjs3.1例子源代码Extjs3.1例子源代码vv
extjs3.0中文API以及例子 中文api，对于英语不太好的很有帮助的。呵呵 全面介绍了extjs3.0
extjs—登陆小例子
在这个例子中，我们定义了一个Store，包含了两个字段`name`和`email`。`proxy`部分设置了数据加载的方式为Ajax，URL指向了本地的`data.json`文件。`reader`则定义了如何解析从服务器返回的JSON数据，`rootProperty`...
extJs源码以及很多例子，供初学者学习