ExtJs4 笔记(4) Ext.XTemplate 模板

2024-04-10 06:38

本文主要是介绍ExtJs4 笔记(4) Ext.XTemplate 模板,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本篇将涉及到ExtJs中一个重要的概念,模板。话说Razor很神奇,但是我个人不是很喜欢那种html混编C#的方式,仿佛又回到了asp的时代。ExtJs的模板同样也可以组织生成灵活的html,而且代码和html有效的分离。本文将细细分析ExtJs模板的用法。

行文之前我先把公共的html和用到的js数据贴在前面,后面的代码都要引用到。

[html]
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
< h1 >使用标签tpl和操作符for</ h1 >
     < div class = "content" id = "div1" ></ div >
< h1 >在子模板的范围内访问父元素对象</ h1 >
     < div class = "content" id = "div2" ></ div >
< h1 >数组元素索引和简单运算支持</ h1 >
     < div class = "content" id = "div3" ></ div >
< h1 >自动渲染单根数组</ h1 >
     < div class = "content" id = "div4" ></ div >
< h1 >条件逻辑判断</ h1 >
     < div class = "content" id = "div5" ></ div >
< h1 >即时执行任意的代码</ h1 >
     < div class = "content" id = "div6" ></ div >
< h1 >模板成员函数</ h1 >
     < div class = "content" id = "div7" ></ div >

定义data数据源:

[Js]
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var data = {
     name: '张三' ,
     job: 'C#程序员' ,
     company: '惠普' ,
     email: 'zhangsan@163.com' ,
     address: '武汉市洪山区光谷软件园' ,
     city: '武汉' ,
     state: '正常' ,
     zip: '430000' ,
     drinks: [ '绿茶' , '红酒' , '咖啡' ],
     friends: [{
         name: '李四' ,
         age: 6,
         like: '鲜花'
     }, {
         name: '王五' ,
         age: 26,
         like: '足球'
     }, {
         name: '赵六' ,
         age: 81,
         like: '游戏'
     }]
};

一、使用标签tpl和操作符for

现在我要把data数据源展示到页面上,并组织到table里面。但是这个html不是写死的,而是通过模板生成。配合使用标签tpl和操作符for,可以循环输出张三的朋友:

[Js]
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//使用标签tpl和操作符for
var tpl = new Ext.XTemplate(
       '<table cellpadding=0 cellspacing=0 border=1 width=400px>' ,
       '<tr><td colspan=2 align=center><b>{name}的个人资料</b></td></tr>' ,
       '<tr><td>姓名:</td><td>{name}</td></tr>' ,
       '<tr><td>工作:</td><td>{job}</td></tr>' ,
       '<tr><td>公司:</td><td>{company}</td></tr>' ,
       '<tr><td>地址:</td><td>{address}</td></tr>' ,
       '<tr><td>喜好饮品:</td><td>{drinks}</td></tr>' ,
       '<tr><td>他的好友:</td><td>' ,
       '<tpl for="friends">' ,
       '<p>{name}:{age}岁</p>' ,
       '</tpl></td></tr>' ,
       '</table>'
);
tpl.overwrite(Ext.get( "div1" ), data);

查看输出效果:

二、在子模板的范围内访问父元素对象

当我们在遍历输出张三的朋友时,需要再次访问张三的信息,怎么做呢,看如下js:

[Js]
?
1
2
3
4
5
6
7
//在子模板的范围内访问父元素对象
var tp2 = new Ext.XTemplate(
  '<tpl for="friends">' ,
  '<p>{name}是{parent.name}的好友。</p>' ,
   '</tpl>'
);
tp2.overwrite(Ext.get( "div2" ), data);

查看输出效果:

三、数组元素索引和简单运算支持

在循环访问数组时,可以通过{#}获取索引信息,基础数据还可以支持简单运算:

[Js]
?
1
2
3
4
5
6
7
//数组元素索引和简单运算支持
var tp3 = new Ext.XTemplate(
  '<tpl for="friends">' ,
      '<p>{#}、一年后,{name}的年龄是:{age+1}</p>' ,
   '</tpl>'
);
tp3.overwrite(Ext.get( "div3" ), data);

查看输出效果:

四、自动渲染单根数组

通过{.}可以自动渲染没有键值对的单根数组,示例如下:

[Js]
?
1
2
3
4
5
6
7
//自动渲染单根数组
var tp4 = new Ext.XTemplate(
  '喜好饮品:<tpl for="drinks">' ,
  ' {.}' ,
   '</tpl>'
);
tp4.overwrite(Ext.get( "div4" ), data);

查看输出效果:

五、条件逻辑判断

配合标签tpl和操作符if的使用,可以做一些简单的逻辑判断,注意没有else操作符,你可以写两个if来代替。另外大于,小于符号要经过html编码,不能直接写出。

[Js]
?
1
2
3
4
5
6
7
8
9
10
11
//条件逻辑判断
var tp5 = new Ext.XTemplate(
  '<table cellpadding=0 cellspacing=0 border=1 width=400px>' ,
  '<tr><td>他的好友:</td><td>' ,
  '<tpl for="friends">' ,
      '<tpl if="age < 18"><p>{name}:[未成年]</p></tpl>' ,
      '<tpl if="age >= 18"><p>{name}:{age}岁</p></tpl>' ,
  '</tpl></td></tr>' ,
  '</table>'
);
tp5.overwrite( "div5" , data);

查看输出效果:

六、即时执行任意的代码

在XTemplate中,{[ ... ]}范围内的内容会在模板作用域的范围下执行。这里有一些特殊的变量:
values:当前作用域下的值。若想改变其中的值,你可以切换子模板的作用域。
parent:父级模板的对象
xindex:若是循环模板,这是当前循环的索引index(从1开始)。
xcount:若是循环模板,这是循环的次数 。

[Js]
?
1
2
3
4
5
6
7
8
9
10
11
//即时执行任意的代码
var tp6 = new Ext.XTemplate(
  '当前日期:{[new Date().toLocaleDateString()]}' ,
  '<table cellpadding=0 cellspacing=0 border=1 width=400px>' ,
  '<tpl for="friends"><tr>' ,
      '<tpl if="xindex == 1"><td rowspan={[xcount]}>他的好友:</td></tpl>' ,
      '<td>{["姓名:" + values.name + ",年龄:" + values.age + ","+ (values.like=="鲜花"?"是个女孩":"是个男孩")]}</td>' ,
  '</tr></tpl>' ,
  '</table>'
);
tp6.overwrite( "div6" , data);

查看输出效果:

七、模板成员函数

在模板中还可以调用自定义函数,这些函数通过配置传入。相关写法如下:

[Js]
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//模板成员函数
var tp7 = new Ext.XTemplate(
  '<b>他的好友:</b><tpl for="friends"><p>' ,
      '<tpl if="this.isWoman(like)">{name}:是个女性。</tpl>' ,
      '<tpl if="this.isMen(like)">{name}:是个男性。</tpl>' ,
      '<tpl if="this.isChild(age)">{name}:是个小孩。</tpl>' ,
  '</p></tpl>' , {
      isWoman: function (like) {
          return like == '鲜花' ;
      },
      isMen: function (like) {
          return like != "鲜花" ;
      },
      isChild: function (age) {
          return age < 18;
      }
  }
);
tp7.overwrite(Ext.get( "div7" ), data);

查看输出效果:


作者:李盼(Lipan)
出处: [Lipan] ( http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有。

这篇关于ExtJs4 笔记(4) Ext.XTemplate 模板的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/890317

相关文章

poj3468(线段树成段更新模板题)

题意:包括两个操作:1、将[a.b]上的数字加上v;2、查询区间[a,b]上的和 下面的介绍是下解题思路: 首先介绍  lazy-tag思想:用一个变量记录每一个线段树节点的变化值,当这部分线段的一致性被破坏我们就将这个变化值传递给子区间,大大增加了线段树的效率。 比如现在需要对[a,b]区间值进行加c操作,那么就从根节点[1,n]开始调用update函数进行操作,如果刚好执行到一个子节点,

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

poj 1258 Agri-Net(最小生成树模板代码)

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码:效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n

uva 1342 欧拉定理(计算几何模板)

题意: 给几个点,把这几个点用直线连起来,求这些直线把平面分成了几个。 解析: 欧拉定理: 顶点数 + 面数 - 边数= 2。 代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#inc

uva 11178 计算集合模板题

题意: 求三角形行三个角三等分点射线交出的内三角形坐标。 代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#include <stack>#include <vector>#include <

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络(1)sklearn

系列文章目录 监督学习:参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归(SAheart.csv) 【学习笔记】 陈强-机器学习-Python-Ch6 多项逻辑回归 【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch7 判别分析 【学

系统架构师考试学习笔记第三篇——架构设计高级知识(20)通信系统架构设计理论与实践

本章知识考点:         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识

poj 2104 and hdu 2665 划分树模板入门题

题意: 给一个数组n(1e5)个数,给一个范围(fr, to, k),求这个范围中第k大的数。 解析: 划分树入门。 bing神的模板。 坑爹的地方是把-l 看成了-1........ 一直re。 代码: poj 2104: #include <iostream>#include <cstdio>#include <cstdlib>#include <al

最大流、 最小费用最大流终极版模板

最大流  const int inf = 1000000000 ;const int maxn = 20000 , maxm = 500000 ;struct Edge{int v , f ,next ;Edge(){}Edge(int _v , int _f , int _next):v(_v) ,f(_f),next(_next){}};int sourse , mee

论文阅读笔记: Segment Anything

文章目录 Segment Anything摘要引言任务模型数据引擎数据集负责任的人工智能 Segment Anything Model图像编码器提示编码器mask解码器解决歧义损失和训练 Segment Anything 论文地址: https://arxiv.org/abs/2304.02643 代码地址:https://github.com/facebookresear