carousel example with a layout/form in it?

[nosarious]

Good morning,

I'm struggling to work with carousels for a project, but I can't change any examples to do what I want.

I would like a carousel card with a div that can hold a background image (covering the whole 'card') and a scrollable div overtop (I may have a solution for that using the html suggestion someone gave me before) I suspect that what I am looking for is the layout, but I don't know where to go to learn more.

None of the examples really combine the possibilities in this way, except perhaps the GeoCongress, but I can't test that one to see if it works because I am not in the states (the 'finding location' doesn't change, and pressing 'don't allow' doesn't let you access the program without a location)

Is there an example that incorporates a carousel card with other elements on it? Something like a list or a form that I can see how the different elements work together in the javascript? Most of the examples seem to concentrate on tabs (the tweet) or are singular in nature (the forms is just forms but nothing else, the list is just a list but nothing else.)

A combo example to show how to incorporate different things like a list and a carousel would be great. Is there one I am missing?

[evant]

Here's a short sample of nesting *Box layouts in a carousel card:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items

var data = [];
for(var i = 0; i < 100; ++i){
data.push('Line ' + i);
}

var carousel = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
html: '1'
},{
flex: 1,
html: '2'
}]
},{
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
html: '3'
},{
flex: 1,
html: '4'
}]
}]
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});

new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel]
});
}
});

[nosarious]

Thank you very much Evant. This is exactly what I needed.
May I suggest it be included in the download of examples, similar to 'tabs' and 'tabs2' examples?

It may help others understand the flow for how things are done.