Ext.js入门：模板（四）

Ext.js入门：模板（四）

1.Ext.DomHelper简介2.Template语法使用简介3.Template简单应用4.Template中使用转换函数5.使用模板的自定义接口6.XTemplate应用一：Ext.DomHelper       处理DOM或模板（Templates）的实用类。能以JavaScript较清晰地编写HTML片段（HTML fragments）或DOM。

二：常用方法：

三：Template语法使用简介

在一些复杂的情况下，我们需要生成HTML片断，这时最常用，最简单，最有效率的一种做法就是应用Ext提供的模板来完成。

说明：Templete 是模板之意，就是定义一段 HTML 代码，并放置若干个{}作为占位符，

运行时将数据填充到{}中去。看来看去，和java中的MessageFormat及C#中的string.formate很像。

XTemplate和DomHelper有很深的渊源，DomHelper是XTemplate的小弟，DomHelper解决不了的事情，XTemplate一定可以。

四：使用XTemplate一般会经历三个步骤：

1、定义XTemplate对象，指定一段HTML代码作为模板；

2、指定XTemplate中定义的HTML应该放置的位置，并填充占位符信息；

3、编译XTemplate。

五：Template简单应用

Ext.onReady(function(){ var xt = new Ext.Template( "

", "", "", "", "", "", "

{2}

{3}

{4}

" );

xt.append("xt", [1, 300, '单元格1', '单元格2', '单元格3']); xt.compile(); })

六：实例化Template时，可以配置任意个参数，会自动连接到一起，这种写法似乎更方便更好读。

append方法同 DomHelper 的 append方法，实际上还有 insertBefore、insertAfter、insertFirst、overwrite 等方法，

不同的是第二个参数，该参数是要填充到占位符中的数据，可以是数组，也可以是json对象。执行完之后得到如下结果：

下面是改造后的例子，填充数据时用json对象代替了原来的数组：

Ext.onReady(function(){ var xt = new Ext.Template( "

", "", "", "", "", "", "

{v1}

{v2}

{v3}

" ); xt.append("xt", {b: 1, w: 300, v1: "单元格1", v2: "单元格2", v3: "单元格3"}); xt.compile(); })

七： Template中使用转换函数：

var xt = new Ext.Template( "

", "", "", "", "", "", "

{v1}

{v2:trim}

{v3:ellipsis(4)}

"); xt.append("xt", { b: 1, w: 300, v1: '单元格1', v2: '单元格2', v3: '单元格3' }); xt.compile();

八：使用模板的自定义接口

JavaScript代码 var data = [ ['1','male','name1','descn1'], ['2','female','name2','descn2'], ['3','male','name3','descn3'], ['4','female','name4','descn4'], ['5','male','name5','descn5'] ]; //自定义接口 var t = new Ext.Template( '', '{0}', '{1:this.renderSex}', '{2:trim}', '{3:ellipsis(10)}', ''

t.renderSex = function(value) { if (value == 'male') { return "红男"; } else { return "绿女"; } }; t.compile();//循环得出数据 for (var i = 0; i < data.length; i++) { t.append(Ext.get('some-element'), data[i]); }

HTML代码

id

sex

name

descn

九： 复杂模板

XTemplate对Template的功能进行了增强，

XTemplate不仅支持在模板内部使用子模板，还具有for和if的功能，

可以让我们在模板中实现循环和判断等功能

1、界面HTML:

2、js: var data = { name: 's', size: 5, options: [ {value: '河北', text: '河北省'}, {value: '唐山', text: '唐山市'}, {value: '路北', text: '路北区'} ] }; var t = new Ext.XTemplate( '', '{text:ellipsis(10)}', '' ); t.append('f', data);Ext.onReady(function(){ var data = { name: 's', size: 5, options: ['河北省','唐山市','路北区'] }; var t = new Ext.XTemplate( '', '{.:ellipsis(10)}', '' ); t.append('f', data);});

另一个实例：

Ext.onReady(function() { var data = { name: "博客园", read: [{ book: '<>', date: '2007-7-7' }, { book: "<<大话设计模式>>", date: "2006-6-6"}] }

//呈现组件

var mypanel = new Ext.Panel({

width: 400,

id: "mypanel",

title: "XtemplateData简单示例",

renderTo: Ext.getBody()

});

创建模板：

var tpl = new Ext.XTemplate( '

', ////对于一维单数据对象,直接用{名称}输出, '

名称:{name}
', '', ///对于多维对象(如拥有多条数据的表), ' 编号:{#},书:{book},日期:{date} ', '

' ); //重写绑定模板(//把数据填充到模板中去,并呈现到目标组件) tpl.overwrite(mypanel.body, data); });

简要说明如下：

1.tpl.compile();//可以在创建模板后,添加tpl.compile();编译代码,速度快点. 2. tpl.overwrite(mypanel.body,data);//把数据填充到模板中去,并呈现到目标组件 3.名称:{name}//对于一维单数据对象,直接用{名称}输出, 4.,//对于多维对象(如拥有多条数据的表),使用tpl和for配合使用,会使用tpl的格式把数据一条一条输出,read为上级节点 5.{.}//对于一维对数据的对象,如color: ['Red', 'Blue', 'Black'],可以用{.}按照tpl模板逐一输出,如:

'',        '

',     ''

6.{#}//表示循环的索引 7.parent.***//在子对象中访问父对象元素,使用parent,如:{parent.name} 8.if//'',              '

{name}

',         '',     //if实现有条件的逻辑判断,很容易使用 9.其他几个常用的参数:      xindex//循环模板的当前索引index（从1开始）,用[]。       xcount//循环模板循环的次数。 用[]

'',              '

编号:{#},书:{book},日期:{date},奇偶:{[xindex%2==0?"偶数":"奇数"]},次数:{[xcount]}

',         ' '

10.模板成员函数：

var tpl = new Ext.XTemplate( '', '', '

Girl: {name} - {age}

', '', '', '

Boy: {name} - {age}

', '', '

', { isGirl: function(name){ return name == 'Sara Grace'; }, isBaby: function(age){ return age < 1; }});

11.实例练习：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。