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

Ext JS开发大全

CmsWing

[Ext JS6]Ext.Template

## [Ext JS6]Ext.Template
### Ext.Template是什么？
Template是HTML 片段的模板，可以结合数据和模板组成需要的HTML，可以进行预编译从来提升性能。
### 使用方式
#### 1. 数据是JOSN对象， 模板中使用 {属性键}
```javascript
var t = new Ext.Template("
	Hello, {name}.
	");
t.append('tmpDiv1', {name:'oscar'});
```

以上tmpDiv1是div的id
结合模板和数据进行显示

#### 2. 数据是简单JSON数组
使用{下标数}指定数组中的数据。
```javascript
var t = new Ext.Template("
	Hello, {0}.
");		
t.append('tmpDiv1', ['oscar']);
```

#### 3. 多个模板参数
多个模板参数使用逗号“，”分割， 效果就是把这些html连接起来。
```javascript
var t = new Ext.Template(["
	Hello, {0}
",", Nice To Meet You!"			                     
]);		
t.append('tmpDiv2', ['oscar']);
```

#### 4. 更多用法
		var t = new Ext.Template([		    '
',		        '{name:trim} {value:ellipsis(6)}',		    '
',		]);		t.compile();		t.append('tmpDiv2', {id: '001', cls: 'myclass', name: 'Oscar',value:'123456789'});

说明：
trim和ellipsis都是Ext.String的方法，trim是去除字符串前后空格。
ellipsis是超过的字符串截断，后面加…, 总长度是包含三个点的长度的。
compile()方法用来做编译。也可以放在参数中：
```javascript
var t = new Ext.Template(['
',
'{name:trim} {value:ellipsis(6)}','
',		],		{			compiled: true,		});		t.append('tmpDiv2', {id: '001', cls: 'myclass', name: 'Oscar',value:'123456789'});
```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS6]Ext.Template

网站导航