Ext Js中Ext.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

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    
    
    
    
	
	
	    
	
	
    
        
    
  
  

  

程序效果：

上述代码中使用了标签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)

程序代码：

程序效果：

 

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:

var tpl = new Ext.XTemplate(
		    '
Name: {name}
',
		    '
Title: {title}
',
		    '
Company: {company}
',
		    '
Kids: ',
		    '',     // interrogate the kids property within the data
		        '
{name}
',
		    '
'
		);

程序效果：

 

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:

 

var tpl = new Ext.XTemplate(
		    '
{name}\'s favorite beverages:
',
		    '',
		        '
 - {.}
',
		    ''
		);

程序效果：

 

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:

 

var tpl = new Ext.XTemplate(
    '
Name: {name}
',
    '
Kids: ',
    '',
        '',
            '
{name}
',
            '
Dad: {parent.name}
',
        '',
    '
'
);

程序效果：

 

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

 

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

 

 

程序效果图：

 

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.

var tpl = new Ext.XTemplate(
    '
Name: {name}
',
    '
Company: {[values.company.toUpperCase() + ", " + values.title]}
',
    '
Kids: ',
    '',
        '
',
        '{name}',
        '
',
    '
'
 );

 

CSS样式为：

 

程序效果图：

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

 

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:

var tpl = new Ext.XTemplate(
    '
Name: {name}
',
    '
Kids: ',
    '',
        '',
            '
Girl: {name} - {age}
',
        '',
         // use opposite if statement to simulate 'else' processing:
        '',
            '
Boy: {name} - {age}
',
        '',
        '',
            '
{name} is a baby!
',
        '',
    '
',
    {
        // XTemplate configuration:
        compiled: true,
        // member functions:
        isGirl: function(name){
           return name == 'Sara Grace';
        },
        isBaby: function(age){
           return age < 1;
        }
    }
);

程序效果为：