Flexible space and carousel

[cmbrandt]

I've got some HTML content that is longer than a full page in height. At the end of this content, I'd like to include a horizontal carousel. Every attempt I make shows the HTML content, but I can't get the carousel to work properly.
Here's where I'm at code-wise...

Ext.create('Ext.Container', {
    fullscreen: true,
    scrollable: true,
    items: [
        {
            xtype: 'panel',
            html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>',
            style: 'background-color: #2E99FC'
        },
        {
            xtype: 'carousel',
            items: [
                {
                    html : 'Item 1',
                    style: 'background-color: #5E99CC'
                },
                {
                    html : 'Item 2',
                    style: 'background-color: #759E60'
                },
                {
                    html : 'Item 3',
                    style: 'background-color: #FF0000'
                }
            ]
        }
     ]
});

Any help greatly appreciated.

[AndreaCammarata]

Hi.
You have more then a solution to achieve that.
You can set your container layout to "vbox" type and with "stretch" align config like follows:

Ext.create('Ext.Container', {
		    fullscreen: true,
		    scrollable: true,
			layout: {
				type: 'vbox',
				align: 'stretch'
			},
		    items: [
		        {
		            xtype: 'panel',
					flex: 0.5,
		            html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>',
		            style: 'background-color: #2E99FC'
		        },
		        {
		            xtype: 'carousel',
					flex: 0.5,
		            items: [
		                {
		                    html : 'Item 1',
		                    style: 'background-color: #5E99CC'
		                },
		                {
		                    html : 'Item 2',
		                    style: 'background-color: #759E60'
		                },
		                {
		                    html : 'Item 3',
		                    style: 'background-color: #FF0000'
		                }
		            ]
		        }
		     ]
		});

Or you can just set the layout type to "fit" and dock the carousel on the bottom, giving it a height value:

Ext.setup({
    onReady: function() {
        
		Ext.create('Ext.Container', {
		    fullscreen: true,
		    scrollable: true,
			layout: 'fit',
		    items: [
		        {
		            xtype: 'panel',
		            html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>',
		            style: 'background-color: #2E99FC'
		        },
			],
			dockedItems: [
		        {
		            xtype: 'carousel',
					dock: 'bottom',
					height: 200,
		            items: [
		                {
		                    html : 'Item 1',
		                    style: 'background-color: #5E99CC'
		                },
		                {
		                    html : 'Item 2',
		                    style: 'background-color: #759E60'
		                },
		                {
		                    html : 'Item 3',
		                    style: 'background-color: #FF0000'
		                }
		            ]
		        }
		     ]
		});
		
	}
    
});

Hope this helps.

[cmbrandt]

Due to the size of the images, I'm hoping to avoid having them on-screen (either docked or in vbox) all the time...

Imagine tryign to reproduce http://itunes.apple.com/us/app/angry...343200656?mt=8 -- text on top, scroll down to a horizontal carousel, then more text below.

Is it possible to do something that mimics that?