ExtJs4 笔记(4) Ext.XTemplate 模板

ExtJs4 笔记(4) Ext.XTemplate 模板

摘自:http://www.cnblogs.com/lipan/

本篇将涉及到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: ‘[email protected]‘,

    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);

查看输出效果:

打开新标签

var EditTpl = new Ext.XTemplate(
        ‘<a href=javascript:TranToDetial("/Edm/EdmGroupEmail","{group_id}")>‘ + "{group_total_email}" + ‘</a> ‘
    );
Ext.onReady(function () {
    var EdmGroup = Ext.create(‘Ext.grid.Panel‘, {
        id: ‘EdmGroup‘,
        store: EdmGroupStore,
        width: document.documentElement.clientWidth,
        columnLines: true,
        frame: true,
        columns: [
            { header: "名單編號", dataIndex: ‘group_id‘, width: 150, align: ‘center‘ },
            { header: "名單名稱", dataIndex: ‘group_name‘, width: 150, align: ‘center‘ },
            {
                header: "名單數", dataIndex: ‘group_total_email‘, width: 120, align: ‘center‘, id: ‘security_group_total_email‘,hidden:true,
                xtype: ‘templatecolumn‘, tpl: EditTpl
            },

出处:[Lipan]http://www.cnblogs.com/lipan/

时间: 2024-10-07 20:11:37

ExtJs4 笔记(4) Ext.XTemplate 模板的相关文章

[转载]ExtJs4 笔记(4) Ext.XTemplate 模板

作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律责任. 本篇将涉及到ExtJs中一个重要的概念,模板.话说Razor很神奇,但是我个人不是很喜欢那种html混编C#的方式,仿佛又回到了asp的时 代.ExtJs的模板同样也可以组织生成灵活的html,而且代码和html有效的分离.本文将细细分析ExtJs模板的用法. 行文之前我先把公共的html和

ExtJs4 笔记之Ext.tab.Panel 选项卡

本篇讲解选项卡控件. 一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文. 3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据. 另外,每个tab都可以设置是否可关闭,进入tab时的事件,以及tab是否可用,具体情况请看代码:精心开发5年的UI前端框架! <h1>基本

[转载]ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律责任. 本篇要登场的有三个控件,分别是滚轴控件.进度条控件和编辑控件. 一.滚轴控件 Ext.slider 1.滚轴控件的定义 下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向.纵向,以及单值.多值选择的特性: [html] <h1>滚轴控件</h1> <div class

Ext.XTemplate

1. template 是什么 template 是一个 HTML 片段的模板,它可以进行预编译从来提升性能. 2. Xtemplate Xtemplate 继承自 template,Xtemplate 支持以下这些功能: 1.数组 1) 如果给定的是个数组,他会自动填充,为数组总每一项重复 template 中的 block.2) for=“.” ,会从根节点开始重复,for=“record” ,会从 record 节点开始重复. '<tpl for="score" >'

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/javasc

0722-----C++Primer听课笔记----------虚函数和模板

1.虚指针和虚函数表 1.1 不含有任何数据成员或者虚函数的class或者struct大小为1,含有虚函数的对象在基地址部分有一个vptr,指向虚函数表,因此大小为4个字节. 1.2 动态绑定的原理:假设派生类和基类存在覆盖的关系(基类中定义了虚函数),那么派生类在虚函数表中,会覆盖掉基类相应的虚函数.当程序执行的时候,根据基类指针找到vptr,根据vptr找到vtable,然后找到相应的版本去执行.所以执行的是覆盖的版本,而具体被哪个版本覆盖是由具体的对象类型所决定的,所以才实现了根据对象的具

Django学习笔记(二)—— 模板

疯狂的暑假学习之 Django学习笔记(二)-- 模板 参考: <The Django Book> 第四章 一.模板基础知识 1.模板是如何工作的 用 python manage.py shell 启动交互界面(因为manage.py 保存了Django的配置,如果直接python启动交互界面运行下面代码会出错) 输入下面代码 >>> from django import template >>> t = template.Template('My name

采用ExtJS4.2的Ext.form.ComboBox实现自动完成

采用ExtJS4.2的Ext.form.ComboBox实现自动完成,效果类似google的自动完成,显示结果为Grid.首先上图是王道: 示例代码:http://www.itdatum.net/webui/extjs/2014/08/7924.html 在线演示:http://www.itdatum.net/online/extjs/examples-itdatum/autocomplete/autocomplete.html 采用ExtJS4.2的Ext.form.ComboBox实现自动完

《nodejs+gulp+webpack基础实战篇》课程笔记(八)--模板化开发演练:分离公共头文件

还是先来安装本课需要的插件: npm install raw-loader --save-dev //示例:var header = require("xxx.html");就会把html的内容读取出来 这是一个webpack加载器,可以把文件原样返回为字符串. 这里补充下使用加载器的两种方法: 1.在我们的webpack配置文件中写上 {test:/\.html$/,loader:"加载器名称"} //这代表所有html后缀均会使用这个加载器来处理 2.在requ