ExtJs4 笔记(4) Ext.XTemplate 模板
2013-05-22 16:43
204 查看
本篇将涉及到ExtJs中一个重要的概念,模板。话说Razor很神奇,但是我个人不是很喜欢那种html混编C#的方式,仿佛又回到了asp的时代。ExtJs的模板同样也可以组织生成灵活的html,而且代码和html有效的分离。本文将细细分析ExtJs模板的用法。
行文之前我先把公共的html和用到的js数据贴在前面,后面的代码都要引用到。
[html]
?
定义data数据源:
[Js]
?
现在我要把data数据源展示到页面上,并组织到table里面。但是这个html不是写死的,而是通过模板生成。配合使用标签tpl和操作符for,可以循环输出张三的朋友:
[Js]
?
查看输出效果:
当我们在遍历输出张三的朋友时,需要再次访问张三的信息,怎么做呢,看如下js:
[Js]
?
查看输出效果:
在循环访问数组时,可以通过{#}获取索引信息,基础数据还可以支持简单运算:
[Js]
?
查看输出效果:
通过{.}可以自动渲染没有键值对的单根数组,示例如下:
[Js]
?
查看输出效果:
配合标签tpl和操作符if的使用,可以做一些简单的逻辑判断,注意没有else操作符,你可以写两个if来代替。另外大于,小于符号要经过html编码,不能直接写出。
[Js]
?
查看输出效果:
在XTemplate中,{[ ... ]}范围内的内容会在模板作用域的范围下执行。这里有一些特殊的变量:
values:当前作用域下的值。若想改变其中的值,你可以切换子模板的作用域。
parent:父级模板的对象
xindex:若是循环模板,这是当前循环的索引index(从1开始)。
xcount:若是循环模板,这是循环的次数 。
[Js]
?
查看输出效果:
在模板中还可以调用自定义函数,这些函数通过配置传入。相关写法如下:
[Js]
?
查看输出效果:
行文之前我先把公共的html和用到的js数据贴在前面,后面的代码都要引用到。
[html]
?
[Js]
?
一、使用标签tpl和操作符for
现在我要把data数据源展示到页面上,并组织到table里面。但是这个html不是写死的,而是通过模板生成。配合使用标签tpl和操作符for,可以循环输出张三的朋友:[Js]
?
二、在子模板的范围内访问父元素对象
当我们在遍历输出张三的朋友时,需要再次访问张三的信息,怎么做呢,看如下js:[Js]
?
三、数组元素索引和简单运算支持
在循环访问数组时,可以通过{#}获取索引信息,基础数据还可以支持简单运算:[Js]
?
四、自动渲染单根数组
通过{.}可以自动渲染没有键值对的单根数组,示例如下:[Js]
?
五、条件逻辑判断
配合标签tpl和操作符if的使用,可以做一些简单的逻辑判断,注意没有else操作符,你可以写两个if来代替。另外大于,小于符号要经过html编码,不能直接写出。[Js]
?
六、即时执行任意的代码
在XTemplate中,{[ ... ]}范围内的内容会在模板作用域的范围下执行。这里有一些特殊的变量:values:当前作用域下的值。若想改变其中的值,你可以切换子模板的作用域。
parent:父级模板的对象
xindex:若是循环模板,这是当前循环的索引index(从1开始)。
xcount:若是循环模板,这是循环的次数 。
[Js]
?
七、模板成员函数
在模板中还可以调用自定义函数,这些函数通过配置传入。相关写法如下:[Js]
?
相关文章推荐
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJs4 笔记(3) Ext.XTemplate 模板
- extjs模板的使用:Ext.XTemplate
- ExtJs4 笔记 Ext.XTemplate 模板
- [转载]ExtJs4 笔记(4) Ext.XTemplate 模板
- extjs模板的使用:Ext.XTemplate
- extjs模板的使用:Ext.XTemplate
- ExtJs4 笔记(11) Ext.ListView、Ext.view.View 数据视图
- ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
- extJs 2.1 学习笔记(Ext.data.HttpProxy篇)
- Extjs学习笔记——Ext.data.JsonStore使用说明
- extjs Ext.XTemplate
- ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
- ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更
- ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏