Ememo

Sencha touchのカルーセルに、動的にコンテンツを追加する方法を調べた。
基本的にはベースになっているクラスを参考にすればいいと思うけど、細かいところとか調べるのが面倒なので、サンプルなどから推測してできたやつをメモ。
具体例は↓に。

new Ext.Application({
    launch: function() {

        // Create a Carousel of Items
        var carousel1 = new Ext.Carousel({
            defaults: { cls: 'card' },
            items: [{
                    html: '<h1>Carousel</h1><p>Navigate the ....</p>'
                },
                {
                    title: 'Tab 2',
                    html: '2'
                },
                {
                    title: 'Tab 3',
                    html: '3'
            }]
        });
        var panel = new Ext.Panel({
                fullscreen: true,
                layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                flex: 1
            },
                items: [carousel1]
            });

        setTimeout(function () {
        
            carousel1.add({
                title: 'add test',
                html: 'this added after renderd.'
            });
            carousel1.doLayout();
        }, 1000);
    }
});

要素を追加するには「add」、追加した要素を反映させるのは「doLayout」を、それぞれのインスタンスのメソッドとして実行してあげればOK。