How to add custom container to carousel in Sencha Touch?

Question

How could we add some custom container to the Sencha Touch carousel and avoid it to became a new item that creates second page in carousel?

In other words, how to add container to carousel just before it's scrollable items?

When I'm trying to add container into carousel's dom via innerHTML I'm losing the listeners defined for container.

Any thoughts?

Thanks.

Answer 1

Your question isn't very clear, it would be good for you to post some code that you have tried already. If I am understanding you correctly you can add parent items easily by extending the object hierarchy, for example:

If you have this:

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

You can always add another layer in the middle if you need to:

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

This possibly does not answer your question clearly as the question isn't very clear, if you can update your question with more information and some code to better explain what your trying to achieve, I will update the answer with additional information.

Answer 2

if you would like to add components above a carousel view for example a button you have to position it. Doing this makes the carousel treat it differently and is not used as a card in the carousel.

Altering the example here http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.carousel.Carousel to add a button that is always visible is shown in the code below.

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

Notice that the button has top and left configs set. This is the key to this behaviour.

I made a sencha fiddle to help explain.

Good luck.