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+"/";
%>



  
    
    
    xtemplate
    
	
	
	    
	
	
    
        
    
  
  

  


程序效果:

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


程序效果为:

 

 

你可能感兴趣的:(Ext,Js)