Sencha Touch 2 : 在View內使用html,tpl與itemTpl

在View裡除了使用內建的Compontent外，若需要產生html來當作View的內容
可能會在View的Config內用到以下幾個3種Tag
一.html
直接將html內容放到view內，若有需要被操作的物件是以html產生，建議以此方式放入可使用
1.String
例 字串array會自動使用join串接

html:[            
    "this html block..........",
    "kkman"
].join('')         

2.HTMLElement
例 array需以join('')串接,否則會被當成整個字串顯示

html:[
    "<div>this html block..........</div>",
    "<hr/>",
    "<div>hello</div>"
].join('')

3.Ext.Element ？？

二.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('')

3.Ext.Template[]
設定tpl的動作一定要在執行setData前完成，也就是說可以設定在config的tpl
或是在initial程序內執行設定(在setData前設定好)
例 在config內設定

tpl:new Ext.Template("<div>Hello {name}.</div>")

例 在initial程序中使用

this.setTpl(new Ext.Template("<div>Hello me {name}.</div>"))

4.Ext.XTemplate[]
例
在initial內執行

this.setData([
    {
        name:'ozzy',
        type:'metal'
    },
    {
        name:'linda',
        type:'Rock'
    }
]);

在config內設定

tpl:new Ext.XTemplate(
   '<tpl for=".">',
        '<p>{name}</p>',
        '<p>{type}</p>',
        '<hr>',
    '</tpl>'
)

三.itemTpl
只有在List View可以使用，會將List View所關聯的store或以setData設定array data
每筆資料套用到itemTpl上,注意這裡接受的是XTemplate
1.String
例

itemTpl:'<p> {name}</p><p> {type}</p>'

2.String[]
例

itemTpl:[          
    '<p>{name}</p>',
    '<p>{type}</p>',
    '<hr>'            
].join('')

3.Ext.XTemplate
例

itemTpl:new Ext.XTemplate(          
    '<p>{name}</p>',
    '<p>{type}</p>',
    '<hr>'            
)

4.使用setData
例

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'
    }
]);

四.使用注意事項

1. 不要同時將html與tpl並用，否則html部份資料不會顯示
2. 使用html,內容會被包覆在多層次的innerHtml class node內使用tpl則是將內容直接append進去不做任何節點包裝
3. 若設定的資料為array資料，在tpl內使用for來處理迴圈，list一定要用itemTpl不可使用tpl