`
923080512
  • 浏览: 191431 次
  • 性别: Icon_minigender_1
  • 来自: 商丘
社区版块
存档分类
最新评论

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

查看输出效果:

分享到:
评论

相关推荐

    extJs 2.1学习笔记

    目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

    ### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域,特别是使用ExtJs框架进行复杂用户界面构建时,`RowEditor` 是一个非常实用的功能,它允许用户直接在表格行内编辑数据,极大地提高了...

    ExtJS-3.4.0系列:Ext.TabPanel

    在本文中,我们将深入探讨ExtJS中的`Ext.TabPanel`组件,它是创建多标签界面的核心元素。`Ext.TabPanel`允许开发者在单个容器中组织多个面板或视图,每个面板都有自己的标题,并且可以通过标签页进行切换。让我们...

    ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)

    这篇文章的标题指出这是一个关于“Ext.grid.plugin.RowEditing”的重构,版本为v1.4,发布日期为2011年9月11日。重构通常意味着代码的改进,可能涉及性能优化、错误修复或功能增强。在4.0版本中,RowEditing插件的...

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...

    Ext.Ajax.request2.x实现同步请求

    在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...

    ExtJs 带清空功能的日期组件

    在ExtJs框架中,日期组件(DateField)是用于用户输入日期的常见控件。然而,标准的ExtJs DateField并未内置清空日期的功能,这可能会在某些应用场景中造成不便。为了解决这个问题,我们需要自定义一个扩展,为日期...

    extjs 可编辑的表格树 Ext.tree.ColumnTree Ext.tree.ColumnTreeEditor

    extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....

    ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    ExtJs提供了Ext.Ajax.request方法来进行Ajax请求,但默认情况下,该方法不支持waitMsg属性,不像fp.form.submit方法提供了waitTitle和waitMsg属性来实现等待提示。为了解决这一限制,我们可以采用Ext.MessageBox的...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    在ExtJS 4.x框架中,ComboboxTree是一种特殊的组件,它将传统的下拉框与树形结构结合在一起,提供了一种更为灵活的用户输入方式。这种组件在数据选择上非常实用,尤其当数据层级关系复杂时,可以方便地进行多选或...

    ExtJS 3.4.0中的 ext.jsb2 文件

    在ExtJS 4中,构建过程被重新设计,引入了新的构建系统,如使用`app.json`代替`ext.jsb2`。`app.json`包含了关于应用结构和依赖的信息,使得构建过程更加灵活和可配置。然而,由于`ext.jsb2`在4.0.0中不存在,如果你...

    extjs实例 入门,提供ext所需要的资源文件,详细叙述怎么改变文件颜色

    - 在ExtJS中,通常会有一个全局的CSS文件(如`ext-all.css`),其中定义了大部分组件的基础样式。你也可以创建自定义的CSS文件,以便对特定组件进行定制。 - 改变颜色的基本方法是为组件添加或修改CSS类。例如,...

    ExtJS ToolTip功能

    ### ExtJS ToolTip功能 #### 知识点详解 在ExtJS中,`ToolTip`功能是一种非常实用且灵活的功能,它允许用户在鼠标悬停在某个元素上时显示额外的信息。这种特性对于提高用户界面的可用性和用户体验尤其有用。本文将...

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    总结来说,这个实例展示了如何将前端的ExtJS4框架,特别是其Accordion布局和Ext.tree.Panel组件,与Servlet和Struts2后端框架集成,利用JSON进行数据交换,来创建一个动态的、交互性强的Web应用。用户可以通过折叠和...

    ExtJs学习资料28-Ext.data.JsonStore数据存储器.doc

    document.write("&lt;script type=\"text/javascript\" src=\"../extjs/adapter/ext/ext-base.js\"&gt;&lt;/script&gt;"); document.write("&lt;script type=\"text/javascript\" src=\"../extjs/ext-all.js\"&gt;&lt;/script&gt;"); ...

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    Ext.get与Ext.fly 的区别

    在EXTJS这个强大的JavaScript框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们都用于操作DOM元素,但它们之间存在着微妙的差异。了解这些差异对于优化代码性能和理解EXTJS的工作机制至关重要。 首先,`Ext....

Global site tag (gtag.js) - Google Analytics