sencha-touch - アイテムを追加した後にカルーセルが機能しない

Question

アプリのホームページにはスワイプ可能なカルーセルがあります

`{
               xtype : 'carousel',
               id:'myCar',
               autoDestroy:false,
               styleHtmlContent:true,
               padding:'0 0 0 0',
               height:100

  }`

カルーセルにアイテムを動的に追加するビューに、ペイントされたリスナー関数があります。

`var store = Ext.getStore("inspirationStore");
            var car = Ext.getCmp('myCar');




            var items = car.getItems();
            //destroy all items within this container before populating
            if (items.length > 1){
                for (var j = 0; j < items.length; j++){
                        items[j].destroy();
                }
            }


                for (var i = 0; i < store.getCount(); i++){
                    var item = Ext.create('Ext.Panel',{
                                            html:'<p class = "inspirationMessage"><b>'+ store.getAt(i).data.message + '</b></p>' + '<p class = "authorName"><b>' + store.getAt(i).raw.Author__r.Name + '</b></p>',
                                            cls:'carouselPanel'
                                        });
                    car.add(item);
                }`

カルーセルは最初は正常に機能しますが、別のページに移動してからホームページに戻ると、カルーセルがスワイプしません。アイテムが追加されていることがわかりましたが、カルーセルが正常に機能していません。助言がありますか？

Answer 1

ループにアイテムを追加する代わりに、これを試してください：

            var items = [];
            for (var i = 0; i < store.getCount(); i++){
                var item = Ext.create('Ext.Panel',{
                               html:'<p class = "inspirationMessage"><b>'+ 
                                 store.getAt(i).data.message + '</b></p>' +
                                 '<p class = "authorName"><b>' + 
                                 store.getAt(i).raw.Author__r.Name + '</b></p>',
                               cls:'carouselPanel'
                           });
                items.push(item);
            }
            car.add(items);

Answer 2

use setItems( Array/Object items )which 項目の値を設定します。

ドキュメント