Edited at

XTemplateクラスでHello World

More than 3 years have passed since last update.

Sencha TouchのXTemplateクラスでHello World的に簡単なサンプル。


ループを使わない例


Helloworld.js

Ext.define('CarouselTest.view.Helloworld',{

extend: 'Ext.Container',
xtype: 'helloworld',
config: {
data: {
greeting: 'Hello World'
},
tpl: Ext.create('Ext.XTemplate',
'<tpl>',
'<p>{greeting}</p>',
'</tpl>'
)
}
})


ループを使う例


Helloworld.js

Ext.define('CarouselTest.view.Helloworld',{

extend: 'Ext.Container',
xtype: 'helloworld',
config: {
data: {
users: [
{
greeting: 'Hello',
name: 'World',
},
{
greeting: 'Welcome',
name: 'New World'
}
]
// greeting: 'Hello World'
},
tpl: Ext.create('Ext.XTemplate',
'<tpl for="users">',
'<div>{greeting} {name}</div>',
'</tpl>',
{
// join: function(value) {
// return value(', ');
// }
}
)
// tpl: Ext.create('Ext.XTemplate',
// '<tpl>',
// '<p>{greeting}</p>',
// '</tpl>'
// )
}
})

なぜ、forループを回す場合にはExt.Xtemplateのインスタン化にからメソッドが必要なのかがわからない。