ExtJS 使用点滴 四 XTemplate使用方法

1：基本知识

     XTemplate是Ext.Template扩展的新类，它支持高级功能的模板类，如自动数组输出、条件判断、子模板、基本数学运行、特殊内建的模板变量，直接执行代码和更多的功能

  • Autofilling arrays using templates and sub-templates
  • Conditional processing with basic comparison operators
  • Basic math function support
  • Execute arbitrary inline code with special built-in template variables
  • Custom member functions
  • Many special tags and built-in operators that aren't defined as part of the API, but are supported in the templates that can be created

2：简单例子1

[html] view plaincopyprint?
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
  2. <% 
  3. String path = request.getContextPath(); 
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
  5. %> 
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  8. <html> 
  9.   <head> 
  10.     <base href="<%=basePath%>"> 
  11.      
  12.     <title>xtemplate</title> 
  13.      
  14.     <meta http-equiv="pragma" content="no-cache"> 
  15.     <meta http-equiv="cache-control" content="no-cache"> 
  16.     <meta http-equiv="expires" content="0">     
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
  18.     <meta http-equiv="description" content="This is my page"/> 
  19.      
  20.          
  21.     <script type="text/javascript"> 
  22.       Ext.onReady(function() { 
  23.         //数据源 
  24.         var data = { 
  25.             name: '博客园', 
  26.             read: [{ 
  27.                 book: '开发成功之路---JSP', 
  28.                 date: '2007-7-7' 
  29.             }, { 
  30.                 book: '大话设计模式', 
  31.                 date: '2006-6-6' 
  32.             }] 
  33.         }; 
  34.          
  35.         //呈现组件 
  36.         var mypanel = new Ext.Panel({ 
  37.             id: "mypanel", 
  38.             width: 300, 
  39.             frame: true, 
  40.             height: 100, 
  41.             title: "XTemplate简单示例", 
  42.             renderTo: Ext.getBody() 
  43.         }); 
  44.          
  45.         //创建模板 
  46.         var tp1 = new Ext.XTemplate( 
  47.             '<table width="100%" cellpadding="0" cellspacing="0"><tr><td>编号</td><td>书名</td><td>日期</td></tr>', 
  48.             <span style="color: rgb(255, 0, 0);">'<tpl for="read">',</span> 
  49.             '<tr>', 
  50.             <span style="color: rgb(255, 0, 0);">'<td>{#}</td><td>{book}</td><td>{date}</td></tr>'</span>, 
  51.             <span style="color: rgb(255, 0, 0);">'</tpl></table>'</span> 
  52.         ); 
  53.          
  54.         //重写绑定模板 
  55.         tp1.overwrite(mypanel.body, data); 
  56.      }); 
  57.       
  58.     </script> 
  59.   </head> 
  60.   <body> 
  61.  
  62.   </body> 
  63. </html> 


程序效果：

上述代码中使用了标签tpl和操作符for，可以自由切换for所指定的对象作用域来访问声明于模板中的对象，特殊变量#表示当前数组索引+1（由1开始，不是0）

Ext.XTemplate类常用的方法如下：

  applay(): 返回值为void，applyTemplate的简写形式

  compile(): 返回值为Function，把模板编译成一个函数

  form(String/HTMLElement el): 返回值为Ext.Template，从某个元素的value或innerHTML中创建模板

  applyTemplate(Object/Array values): 返回值为String, 返回HTML片段，这块片段是由数据填充模板之后而成

                                                                                                 其特性

1：Auto filling of arrays

The tpl tag and the for operator are used to process the provided data object:

  • If the value specified in for is an array, it will auto-fill, repeating the template block inside the tpl tag for each item in the array.
  • If for="." is specified, the data object provided is examined.
  • While processing an array, the special variable {#} will provide the current array index + 1 (starts at 1, not 0)

程序代码：

[html] view plaincopyprint?
  1. <script type="text/javascript"> 
  2.       Ext.onReady(function() { 
  3.         //数据源 
  4.         var data = { 
  5.             name: 'Tommy Maintz', 
  6.             title: 'Lead Developer', 
  7.             company: 'Sencha Inc.', 
  8.             email: 'tommy@sencha.com', 
  9.             address: '5 Cups Drive', 
  10.             city: 'Palo Alto', 
  11.             state: 'CA', 
  12.             zip: '44102', 
  13.             drinks: ['Coffee', 'Soda', 'Water'], 
  14.             kids: [{ 
  15.                     name: 'Joshua', 
  16.                     age:3 
  17.                 },{ 
  18.                     name: 'Matthew', 
  19.                     age:2 
  20.                 },{ 
  21.                     name: 'Solomon', 
  22.                     age:0 
  23.             }] 
  24.             }; 
  25.  
  26.          
  27.         //呈现组件 
  28.         var mypanel = new Ext.Panel({ 
  29.             id: "mypanel", 
  30.             width: 300, 
  31.             frame: true, 
  32.             height: 100, 
  33.             title: "XTemplate简单示例", 
  34.             renderTo: Ext.getBody() 
  35.         }); 
  36.          
  37.         //创建模板 
  38.         var tpl = new Ext.XTemplate( 
  39.             '<p>Kids: ', 
  40.             '<tpl for=".">',       // process the data.kids node 
  41.                 '<p>{#}. {name}</p>',  // use current array index to autonumber 
  42.             '</tpl></p>' 
  43.         ); 
  44.          
  45.         //重写绑定模板 
  46.         tpl.overwrite(mypanel.body, data.kids); // pass the kids property of the data object 
  47.          
  48.      }); 
  49.       
  50.     </script> 
  51.   </head> 
  52.   <body> 
  53.  
  54.   </body> 


程序效果：

2： 修改tp1的内容  An example illustrating how the for property can be leveraged to access specified members of the provided data object to populate the template:

[html] view plaincopyprint?
  1. var tpl = new Ext.XTemplate( 
  2.             '<p>Name: {name}</p>', 
  3.             '<p>Title: {title}</p>', 
  4.             '<p>Company: {company}</p>', 
  5.             '<p>Kids: ', 
  6.             '<tpl for="kids">',     // interrogate the kids property within the data 
  7.                 '<p>{name}</p>', 
  8.             '</tpl></p>' 
  9.         ); 


程序效果：

3：修改tp1的内容， Flat arrays that contain values (and not objects) can be auto-rendered using the special {.} variable inside a loop. This variable will represent the value of the array at the current index:

[html] view plaincopyprint?
  1. var tpl = new Ext.XTemplate( 
  2.             '<p>{name}\'s favorite beverages:</p>', 
  3.             '<tpl for="drinks">', 
  4.                 '<div> - {.}</div>', 
  5.             '</tpl>' 
  6.         ); 


程序效果：

4： 修改tp1的内容，When processing a sub-template, for example while looping through a child array, you can access the parent object's members via the parent object:

[html] view plaincopyprint?
  1. var tpl = new Ext.XTemplate( 
  2.     '<p>Name: {name}</p>', 
  3.     '<p>Kids: ', 
  4.     '<tpl for="kids">', 
  5.         '<tpl if="age > 1">', 
  6.             '<p>{name}</p>', 
  7.             '<p>Dad: {parent.name}</p>', 
  8.         '</tpl>', 
  9.     '</tpl></p>' 
  10. ); 


程序效果：

5：修改tp1的内容  The following basic math operators may be applied directly on numeric data values （+ - * /)

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="age &gt; 1">',  // <-- Note that the > is encoded
            '<p>{#}: {name}</p>',  // <-- Auto-number each item
            '<p>In 5 Years: {age+5}</p>',  // <-- Basic math
            '<p>Dad: {parent.name}</p>',
        '</tpl>',
    '</tpl></p>'
);

程序效果图：

6：修改tp1的内容    This example demonstrates basic row striping using an inline code block and the xindex variable:

Execute arbitrary inline code with special built-in template variables

Anything between {[ ... ]} is considered code to be executed in the scope of the template. There are some special variables available in that code:

  • values: The values in the current scope. If you are using scope changing sub-templates, you can change what values is.
  • parent: The scope (values) of the ancestor template.
  • xindex: If you are in a looping template, the index of the loop you are in (1-based).
  • xcount: If you are in a looping template, the total length of the array you are looping.
[javascript] view plaincopyprint?
  1. var tpl = new Ext.XTemplate( 
  2.     '<p>Name: {name}</p>', 
  3.     '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>', 
  4.     '<p>Kids: ', 
  5.     '<tpl for="kids">', 
  6.         '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">', 
  7.         '{name}', 
  8.         '</div>', 
  9.     '</tpl></p>' 
  10. ); 

CSS样式为：

[css] view plaincopyprint?
  1. <style type="text/css"> 
  2.        .even { 
  3.          background-color:white;   
  4.        } 
  5.         
  6.        .odd { 
  7.          background-color: #ffffd9; 
  8.        } 
  9.     </style> 
  10.      

程序效果图：



  可以看到偶数行和奇数行显示不同的颜色

7：修改tp1的内容

Template member functions

One or more member functions can be specified in a configuration object passed into the XTemplate constructor for more complex processing:

[javascript] view plaincopyprint?
  1. var tpl = new Ext.XTemplate( 
  2.     '<p>Name: {name}</p>', 
  3.     '<p>Kids: ', 
  4.     '<tpl for="kids">', 
  5.         '<tpl if="this.isGirl(name)">', 
  6.             '<p>Girl: {name} - {age}</p>', 
  7.         '</tpl>', 
  8.          // use opposite if statement to simulate 'else' processing: 
  9.         '<tpl if="this.isGirl(name) == false">', 
  10.             '<p>Boy: {name} - {age}</p>', 
  11.         '</tpl>', 
  12.         '<tpl if="this.isBaby(age)">', 
  13.             '<p>{name} is a baby!</p>', 
  14.         '</tpl>', 
  15.     '</tpl></p>', 
  16.     { 
  17.         // XTemplate configuration: 
  18.         compiled: true, 
  19.         // member functions: 
  20.         isGirl: function(name){ 
  21.            return name == 'Sara Grace'; 
  22.         }, 
  23.         isBaby: function(age){ 
  24.            return age < 1; 
  25.         } 
  26.     } 
  27. ); 


程序效果为：

posted @ 2012-08-09 11:44  FredTang  Views(10134)  Comments(1)  Edit  收藏  举报