如何在Sencha Touch中添加自定义容器到旋转木马?

时间:2015-01-19 13:54:18

标签: javascript extjs extjs4 sencha-touch

我们如何在Sencha Touch旋转木马上添加一些自定义容器,并避免它成为在旋转木马中创建第二页的新项目?

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

当我试图通过innerHTML将容器添加到carousel的dom中时,我正在丢失为容器定义的侦听器。

有什么想法吗?

感谢。

2 个答案:

答案 0 :(得分:0)

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

如果你有这个:

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
        }]
    }]
});

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

答案 1 :(得分:0)

如果您想在轮播视图上方添加组件,例如按钮,则必须将其放置。这样做会使轮播以不同的方式对待它,并且不会在转盘中用作卡片。

在此处更改示例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来帮助解释。

祝你好运。