如何在 Sencha Touch 中将自定义容器添加到轮播？答案

【问题标题】：How to add custom container to carousel in Sencha Touch?如何在 Sencha Touch 中将自定义容器添加到轮播？
【发布时间】：2015-01-19 13:54:17
【问题描述】：

我们如何在 Sencha Touch 轮播中添加一些自定义容器，避免它成为在轮播中创建第二页的新项目？

换句话说，如何在轮播的可滚动项之前将容器添加到轮播？

当我尝试通过 innerHTML 将容器添加到轮播的 dom 时，我丢失了为容器定义的侦听器。

有什么想法吗？

谢谢。

【问题讨论】：

标签： javascript extjs extjs4 sencha-touch

【解决方案1】：

您的问题不是很清楚，最好发布一些您已经尝试过的代码。如果我对您的理解正确，您可以通过扩展对象层次结构轻松添加父项，例如：

如果你有这个：

Ext.create("Ext.panel.Panel", {
    xtype: "panel",
    title: "Main Window",
    items: [{
        // carousel code here
    }]
});

如果需要，您可以随时在中间添加另一层：

Ext.create("Ext.panel.Panel", {
    xtype: "panel",
    title: "Main Window",
    items: [{
        xtype: "panel",
        title: "My Carousel",
        items: [{
             // carousel code here
        }]
    }]
});

这可能无法清楚地回答您的问题，因为问题不是很清楚，如果您可以使用更多信息和一些代码更新您的问题以更好地解释您尝试实现的目标，我将使用其他信息更新答案。

【讨论】：

【解决方案2】：

如果您想在轮播视图上方添加组件，例如按钮，您必须定位它。这样做会使轮播以不同的方式对待它，并且不会在轮播中用作卡片。

更改此处的示例http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.carousel.Carousel 以添加始终可见的按钮如下面的代码所示。

Ext.create('Ext.Carousel', {
fullscreen: true,

defaults: {
    styleHtmlContent: true
},

items: [
    {
        xtype: 'button',
        text: 'A Button',
        top: 10,
        left: 10
    },
    {
        html : 'Item 1',
        style: 'background-color: #5E99CC'
    },
    {
        html : 'Item 2',
        style: 'background-color: #759E60'
    },
    {
        html : 'Item 3'
    }
]
});

请注意，按钮设置了顶部和左侧配置。这是这种行为的关键。

我发了sencha fiddle帮助解释。

祝你好运。

【讨论】：