碼上快樂

相關內容    簡體    繁體

ExtJS 使用點滴 四 XTemplate使用方法

本文轉載自   查看原文   2012-08-09 11:44   9757 

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 plain copy print ?
  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 plain copy print ?
  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 plain copy print ?
  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 plain copy print ?
  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 plain copy print ?
  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 plain copy print ?
  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 plain copy print ?
  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 plain copy print ?
  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. ); 


程序效果為：


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 039——VUE中組件之子組件中data使用實例與text-xtemplate的使用方法 Extjs4 MVC Controller使用方法 [轉]ExtJS的使用方法匯總—配置和表格控件使用 XTemplate模板學習和使用總結 ExtJs開發教程_001_Ext.data.Store使用方法詳解 ExtJS 使用點滴 十二 ViewPort 嵌套及TreePanel 寬度高度自適應 fedora 配置使用點滴 java點滴之MulticastSocket的使用 RESTful使用方法 Iperf使用方法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM