XTemplateクラスでHello World

  • 0
    Like
  • 0
    Comment
    More than 1 year has 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のインスタン化にからメソッドが必要なのかがわからない。