可能會在View的Config內用到以下幾個3種Tag
一.html
直接將html內容放到view內，若有需要被操作的物件是以html產生，建議以此方式放入可使用
1.String
例 字串array會自動使用join串接
html:[
"this html block..........",
"kkman"
].join('')
例 array需以join('')串接,否則會被當成整個字串顯示
html:[
"<div>this html block..........</div>",
"<hr/>",
"<div>hello</div>"
].join('')
二.tpl
當為動態資料產生的內容，利用setData傳入資料與tpl產生view的html內容,通常會在一般的view內使用
一定要有執行setData(),tpl才會被render產生html
1.String
tpl:"<div><div>Hello me</div><div>{name}</div><div>{rock}</div></div>"
tpl:[
"<div>",
"<div>Hello me</div>",
"<div>{name}</div>",
"<div>{rock}</div>",
"</div>"
].join('')
設定tpl的動作一定要在執行setData前完成，也就是說可以設定在config的tpl
或是在initial程序內執行設定(在setData前設定好)
例 在config內設定
tpl:new Ext.Template("<div>Hello {name}.</div>")
this.setTpl(new Ext.Template("<div>Hello me {name}.</div>"))
4.Ext.XTemplate[]
例
在initial內執行
this.setData([
{
name:'ozzy',
type:'metal'
},
{
name:'linda',
type:'Rock'
}
]);
tpl:new Ext.XTemplate(
'<tpl for=".">',
'<p>{name}</p>',
'<p>{type}</p>',
'<hr>',
'</tpl>'
)
只有在List View可以使用，會將List View所關聯的store或以setData設定array data
每筆資料套用到itemTpl上,注意這裡接受的是XTemplate
1.String
例
itemTpl:'<p> {name}</p><p> {type}</p>'
例
itemTpl:[
'<p>{name}</p>',
'<p>{type}</p>',
'<hr>'
].join('')
例
itemTpl:new Ext.XTemplate(
'<p>{name}</p>',
'<p>{type}</p>',
'<hr>'
)
例
var list={
xtype:'list',
itemId:'mylist',
itemTpl:new Ext.XTemplate(
'<p>{name}</p>',
'<p>{type}</p>',
'<hr>'
)
}
this.getComponent('mylist').setData([
{
name:'ozzy',
type:'metal'
},
{
name:'linda',
type:'Rock'
}
]);
四.使用注意事項
- 不要同時將html與tpl並用，否則html部份資料不會顯示
- 使用html,內容會被包覆在多層次的innerHtml class node內使用tpl則是將內容直接append進去不做任何節點包裝
- 若設定的資料為array資料，在tpl內使用for來處理迴圈，list一定要用itemTpl不可使用tpl
