[Ext JS6实战] Ext.XTemplate| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS6实战] Ext.XTemplate

## [Ext JS6实战] Ext.XTemplate
#### 1.数组自动填充
#### 1.1 数组
```javascript
 var users = [	
	 { name: 'User1',  age: 24 },	
	 { name: 'User2',  age: 22 },
	 { name: 'User3',  age: 24 },
	 { name: 'User4',  age: 25 },	
	 { name: 'User5',  age: 20 }		
	 ];	
	 var tpl = new Ext.XTemplate(		
	 'Users: ',	
	 '',     			        
	 '{#}. {name}',
	 ''	 
 );
 tpl.append('tmpDiv1', users);
```

users是一数组
Ext.XTemplate中的用于对数组进行循环
{#} 是循环的下标
{属性名} - 对应的属性值
#### 1.2 对象里面包含的数组
```javascript
var data = {
	name: 'Employees',	
	users: [	
		{ name: 'User1',  age: 24 },
		{ name: 'User2',  age: 22 },	
		{ name: 'User3',  age: 24 },	
		{ name: 'User4',  age: 25 },	
		{ name: 'User5',  age: 20 }		
	]	
	};	
	tpl = new Ext.XTemplate(	
	'Users: ',
	'', 
	'{#}. {name}',
	''	
);	
tpl.append('tmpDiv1', data.users);
```

除了在tpl.append时使用数组，也可以在模板中的for里面指定数组的键。
   ```javascript
tpl = new Ext.XTemplate(
	'Users: ',
	'',     			        
	'{#}. {name}',
	''	  
);
tpl.append('tmpDiv1', data);
```

#### 1.3 数组循环
//以当前参数为循环数组
//以当前参数对象的某个属性对应的数组进行循环
//以对象中的子元素的子元素为循环数组
//会使用between进行分割。
```javascript
tpl = new Ext.XTemplate('{#}.{name}');	 
tpl.append('tmpDiv1', data.users);
```

#### 1.4 对象
. 当前对象
… 父对象
也可以直接写对象名。
### 2.
#### 2.1 {.} 元素是字符串的数组，使用{.}代表当前元素
```javascript
  var flatArray = ['User1','User2','User3','User4','User5']	
  tpl = new Ext.XTemplate(
  '"{.}"的使用：{.}'
  );	 
  tpl.append('tmpDiv1', flatArray);

```
#### 2.2.{parent.属性名} 可以获取父对象中的属性
```javascript
  // parent 		
  data = {		
	  name: 'Employees',	
	  users: [			
	  { name: 'User1',  age: 24 },	
	  { name: 'User2',  age: 22 },	
	  { name: 'User3',  age: 24 },	
	  { name: 'User4',  age: 25 },	
	  { name: 'User5',  age: 20 }
	  ]			
	  };	
	  tpl = new Ext.XTemplate(	
	  'Users: ',
	  '',
	  '{#}. {parent.name}-{name}',
	  ''
  );
  tpl.append('tmpDiv1', data);
```

#### 2.3 使用foreach对象类型的键值遍历
{$} - 代表键
{.} - 代表值
```javascript
data = {
	name: 'Employees',
	users: [
	{ name: 'User1',  age: 24 },
	{ name: 'User2',  age: 22 },
	{ name: 'User3',  age: 24 },
	{ name: 'User4',  age: 25 },
	{ name: 'User5',  age: 20 }
	]					
	};
	tpl = new Ext.XTemplate(
	'', 
	'{$}={.}',
	''
	);
tpl.append('tmpDiv1', data);
```

### 3 条件判断
#### 3.1 在tpl 使用 if 进行条件判断

> 是大于 （html >的字符实体）
< 是小于（html <的字符实体转义）
>= >=
<= <=
!=
== 等于
```javascript
   //if 条件判断			   
   tpl = new Ext.XTemplate(					   
   'If 条件判断：',
   '',
   '',
   '{name}',
   '',					    
   ''
   );
   tpl.append('tmpDiv1', data);
```

字符串比较加 ’
```javascript
 tpl = new Ext.XTemplate(
 '单双引号：',
 '',					        
 '',
 '{name}',
 '',
 ''	
 );
 tpl.append('tmpDiv1', data);
```

#### 3.2 在tpl 使用 switch case 进行条件判断3.2 在tpl 使用 switch case 进行条件判断
```javascript
	   //switch case default 条件判断			  
	   tpl = new Ext.XTemplate(
	   'Case 条件判断：',
	   '',
	   '',
	   '',
	   '{name}:{age}:Male',
	   '',				                    
	   '{name}:{age}:Female',
	   '',
	   ''
	   );
	   tpl.append('tmpDiv1', data);
```

### 4数学公式支持

```javascript
  tpl = new Ext.XTemplate(
  '数学公式，加减乘除：',
  '',					        
  '',					            
  '{age+1}',					            //
  '{age-1}',
  '{age*2}',
  '{age/2}',
  '',
  ''
  );
  tpl.append('tmpDiv1', data);
```

### 5内置变量：
out ：
values ：当前作用域下的值对象，通过切换子模板的作用域可以改变其中的值
parent ： 父模板的值对象
xindex ： for和foreach循环模板的索引
xcount： for 循环总循环次数
xkey ： foreach的键值
```javascript
  //内置变量
  data = {
	  name: 'Employees',
	  users: [
		  { name: 'User1',  age: 24 },
		  { name: 'User2',  age: 22 },
		  { name: 'User3',    age: 24 },
		  { name: 'User4',   age: 25 },
		  { name: 'User5', age: 20 }
	  ]
	  }
	  tpl = new Ext.XTemplate(
	  '内置变量：',
	  'Name:  {[values.name.toUpperCase()]}',
  );
  tpl.append('tmpDiv1', data);
```

### 6.模板成员函数
```javascript
  tpl = new Ext.XTemplate(	
  '模板成员函数：',
  '',
  '{name}:{age}:Male',						        
  '',						            
  '{name}:{age}:FeMale',						        
  '',
  '', 					    
  {// XTemplate 
  configuration:
  disableFormats: true,
  isMale: function(name){
  return name == 'User1' || name == 'User2';
  }
  }
  );
  tpl.append('tmpDiv1', data);
```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS6实战] Ext.XTemplate

网站导航