XTemplateクラスでHello World

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のインスタン化にからメソッドが必要なのかがわからない。