Sencha Touch Carousel 中的物品消失答案

【问题标题】：Items in Sencha Touch Carousel disappearingSencha Touch Carousel 中的物品消失
【发布时间】：2011-03-24 18:43:32
【问题描述】：

我目前正在使用 Sencha Touch 构建一个应用程序。我们在包含多个项目的页面上有一个特定的轮播。单击其他面板上的按钮后，会在面板中添加和删除某些项目。

问题：第一次点击时一切正常，但点击再次点击同一按钮时，功能停止工作并轮播显示变为空白，看不到任何项目。

下面是按钮处理程序，用于更改轮播itemsCarousel 的内容。该函数将itemPanels[ b.getBadgeText() ] 添加到itemsCarousel 的项目中。对于前四次左右的点击，效果很好。在那之后，当我单击一个按钮时，轮播中的所有项目都消失了，我无法添加或删除更多内容，即使从控制台手动调用轮播也是如此。

handler: function(b, e) {
    itemsCarousel.insert(1, itemPanels[ b.getBadgeText() ]);
    itemsCarousel.doLayout(); itemsCarousel.doComponentLayout();
    itemsCarousel.setActiveItem(1);
    itemsCarousel.remove(0, false);
}

我尝试过的事情：

通过将项目插入插槽0，设置0 活动，然后删除1 来更改顺序。
在每一行放置 javascript 断点，查看轮播在哪里变为空白。有时它出现在 .insert() 语句中，有时出现在 .remove() 中。
从控制台手动执行所有这些操作。
在.remove() 调用（如上所示）和itemsCarousel 的声明中调整autoDestroy 参数。

如果您需要更多代码，我可以发布您认为可能相关的任何内容，我不想用过多的代码污染这个线程。谢谢你的帮助！

编辑：如果有人知道重现相同功能的另一种方法，我也对此持开放态度。我在想也许创建一个带有一个项目的虚拟支架容器，一个轮播，并在单击按钮时删除整个轮播并重新添加一个全新的（带有新项目）？

【问题讨论】：

如果您习惯使用控制台，请确保 carousel.items 集合包含您认为在单击之前和之后应该包含的内容。查看控制台中的 dom 也可能提供线索。
@Jason，感谢您的回复。我在有问题的点击之前和之后检查了 DOM，一切看起来都很正常。即使单击后 DOM 显示 carousel.items 具有正确的项目，它们只是没有正确显示。当我最初使用carousel.removeAll() 并尝试重新添加项目时，我遇到了一些类似的症状，但我转向了这种方法，因为它暂时有效。我觉得我很接近哪里出了问题，但我就是搞不定！

标签： javascript sencha-touch carousel

【解决方案1】：

嗯，我想出了如何使用不同的方法重现该功能。

我构建了多个轮播，每个都包含我想要的面板，然后有一个根面板，它可以根据按钮按下简单地设置活动轮播。例如，现在的层次结构如下所示：

rootPanel
{
    carousel[0]
    {
        panel1
        panel2
    }
    carousel[1]
    {
        panel3
        panel4
    }
    ...
}

然后我执行rootPanel.setActiveItem(x) 来显示新的轮播。

【讨论】：