基础篇(5)：ExtJs中的模板详解2

1、基础篇基础篇(5)：ExtJs中的模板详解中的模板详解讲师：风舞烟ExtJs版版国讯教育通用智能国讯教育通用智能OA办公平台办公平台Ext.DomHelper简介Template语法使用简介Template简单应用Template中使用转换函数使用模板的自定义接口XTemplate应用复杂模板综合应用Ext.DomHelper 处理DOM或模板（Templates）的实用类。能以JavaScript较清晰地编写HTML片段（HTML fragments）或DOM。如以下范例产生五个子元素的无须列表，追加到当前元素my-div： 常用方法Template语法使用简介 在一些复杂的情况下，我们需要

2、生成HTML片断，这时最常用，最简单，最有效率的一种做法就是应用Ext提供的模板来完成。说明：Templete 是模板之意，就是定义一段 HTML 代码，并放置若干个作为占位符，运行时将数据填充到中去。看来看去，和java中的MessageFormat及C#中的string.formate很像。XTemplate和DomHelper有很深的渊源，DomHelper是XTemplate的小弟，DomHelper解决不了的事情，XTemplate一定可以。 使用XTemplate一般会经历三个步骤： 1、定义XTemplate对象，指定一段HTML代码作为模板； 2、指定XTemplate中定义的

3、HTML应该放置的位置，并填充占位符信息； 3、编译XTemplate。 Template简单应用Ext.onReady(function() var xt = new Ext.Template( , , 2, 3, 4, , ); xt.append(xt, 1, 300, 单元格1, 单元格2, 单元格3); pile(); ) 页面如下： 实例化Template时，可以配置任意个参数，会自动连接到一起，这种写法似乎更方便更好读。append方法同 DomHelper 的 append方法，实际上还有 insertBefore、insertAfter、insertFirst、overwri

4、te 等方法，不同的是第二个参数，该参数是要填充到占位符中的数据，可以是数组，也可以是json对象。执行完之后得到如下结果： 单元格1 单元格2 单元格3 下面是改造后的例子，填充数据时用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); pile(); ) Template中使用转换函数eg: var xt = new Ext.Template( , , v

5、1, v2:trim, v3:ellipsis(4), , ); xt.append(xt, b: 1, w: 300, v1: 单元格1, v2: 单元格2, v3: 单元格3 ); pile();Ext.DomHelper简介Template语法使用简介Template简单应用Template中使用转换函数使用模板的自定义接口XTemplate复杂模板综合应用JavaScript代码 var data = 1,male,name1,descn1, 2,female,name2,descn2, 3,male,name3,descn3, 4,female,name4,descn4, 5,mal

6、e,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 绿女; ; pile(); for (var i = 0; i data.length; i+) t.append(Ext.get(some-element), datai); HTML代码 id sex name descn Ext.DomHelper简介XTempla

7、te语法使用简介XTemplate简单应用XTemplate中使用转换函数使用模板的自定义接口复杂模板综合应用XTemplate对Template的功能进行了增强，XTemplate不仅支持在模板内部使用子模板，还具有for和if的功能，可以让我们在模板中实现循环和判断等功能例4-3：1、界面HTML:2、js: var data = name: s, size: 5, options: value: 河北, text: 河北省, value: 唐山, text: 唐山市, value: 路北, text: 路北区 ; var t = new Ext.XTemplate( , text:ell

8、ipsis(10), ); t.append(f, data);例4-4：操作简单数组Ext.onReady(function() var data = name: s, size: 5, options: 河北省,唐山市,路北区 ; var t = new Ext.XTemplate( , .:ellipsis(10), ); t.append(f, data););例4-5： Ext.onReady(function() var data = name: 博客园, read: book: , date: 2007-7-7 , book: , date: 2006-6-6 /呈现组件 var

9、 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); );简要说明如下：pile();/可以

10、在创建模板后,添加pile();编译代码,速度快点.2. tpl.overwrite(mypanel.body,data);/把数据填充到模板中去,并呈现到目标组件3.名称:name/对于一维单数据对象,直接用名称输出,4.,/对于多维对象(如拥有多条数据的表),使用tpl和for配合使用,会使用tpl的格式把数据一条一条输出,read为上级节点5./对于一维对数据的对象,如color: Red, Blue, Black,可以用.按照tpl模板逐一输出,如: , ., 6.#/表示循环的索引7.if/, name, , /if实现有条件的逻辑判断,很容易使用8.其他几个常用的参数: xinde

11、x/循环模板的当前索引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 = tom; , isBaby: function(age) return age 1; );Ext.DomHelper简介XTemplate语法使用简

12、介XTemplate简单应用XTemplate中使用转换函数使用模板的自定义接口复杂模板综合应用实例演示实例演示:用模板呈现服务器数据用模板呈现服务器数据 Ext.onReady(function() var mydata; Ext.Ajax.request( url:getXtemplateData.ashx,/服务器端地址 success:function(request) mydata=request.responseText;/服务器端文本数据 mydata=eval(+mydata+);/使用eval把文本数据转换为json对象 /或者用extjs自带的方法:mydata=Ext.util.JSON.decode(mydata),效果相同 var tpl2=new Ext.XTemplate( 编号名称地址位置, , #linknamelinkurllinkpos, ); pile(); tpl2.overwrite(Ext.get(container),mydata); , failure:function() alert(failure!); );)服务器返回的数据（getXtemplateData.aspx）results:id:1,linkname:博客园,linku