How to make a Carousel take the space it needs? - sencha-touch

Question

I'm not quite figuring out how to have a carousel between two other items, inside a container, with the carousel NOT having a set height but instead taking the space it requires depending on the size of the content of the active item. Example code:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'abc'
}
]
},
{
xtype: 'carousel',
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'just need space for one line'
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'need<br/>space<br/>for<br/>more<br/>lines'
}
]
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'def'
}
]
}
]
}
});
For me it just collapses into nothing (not taking any space at all) if height isn't specified. Using Sencha Touch 2.

Answer 1

You need to set a layout to your container. You can find an intro to layouts here
Basically, you add this in your config :
layout:'vbox',
The VBox layout positions items horizontally in the container.
Then, in your carousel, just add :
flex:1
to tell it to take as much space at it can.
Example here
Hope this helps

Answer 2

Hey #TragedyStruck first you have understand your screen where you display your web app. Ok here we go, I did version of your code. The component Ext.Viewport.getSize().height take the necessary space for your element. This works for elements NOT fullscreen, if you want fullscreen elements, so you need to programmatically to make a function.
Ext.define('myapp.view.MyContainer', {
extend: 'Ext.Container',
xtype: 'mycontainer1',
config: {
scrollable: true,
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'abc'
}
]
},
{
xtype: 'carousel',
style: 'background-color: red',
height: Ext.Viewport.getSize().height,
renderTo: document.body,
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'just need space for one line'
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'need<br/>space<br/>for<br/>more<br/>lines'
}
]
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'def'
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'ghi'
}
]
}
]
}
});
I hope this helps. :)