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

使用setItems( Array/Object items )which 设置项目的值。

文档