Carousels inside items of a tabbar?

[flashpro]

Hi there,

I'm trying to create a user interface in which you navigate with a TapBar at the bottom of the screen. When you click a tab in this bar, you will be redirected to a "page" (item of the TabBar). In this page I'd like to show a Carousel. The TabBar should remain at the bottom of the screen. The Carousel fills the space above it.

This is what I came up with (and does not work ):

Ext.setup({
    tabletStartupScreen: "images/tablet_startup.png",
    icon: "images/icon.png",
    glossOnIcon: true,
    
    onReady: function() {
        // BUILD CAROUSEL (SHOWN INSIDE TABPANEL)
        var carousel = new Ext.Carousel({
            ui: "light",
            items: [{
                html : "<h1>Slide 1</h1>"
            },
            {
                html : "<h1>Slide 2</h1>"
            },
            {
                html : "<h1>Slide 3</h1>"
            },
            {
                html : "<h1>Slide 4</h1>"
            }]
        });
    
        // BUILD MAIN NAVIGATION
        var navigation = new Ext.TabPanel({
            items : [{
                iconCls : 'bookmarks',
                title : 'home',
                contentEl : carousel
            },{
                iconCls : 'info',
                title : 'print',
                html : 'replace this with contentEl'
            }],
            
            tabBar: {
                dock: 'bottom',
                scroll: {
                    direction: 'horizontal',
                    scrollbars: false
                },
                layout: {
                    pack: 'center'
                }
            }
        });
        
        // BUILD MAIN STRUCTURE
        new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                flex: 1
            },
            items: [navigation]
        });
    }
});

Any help would be appreciated. Please be gentle, I'm just starting to use Sencha Touch...

[evant]

You want something more like this:

Ext.setup({
    tabletStartupScreen: "images/tablet_startup.png",
    icon: "images/icon.png",
    glossOnIcon: true,
    
    onReady: function(){
        // BUILD CAROUSEL (SHOWN INSIDE TABPANEL)
        var carousel = new Ext.Carousel({
            iconCls: 'bookmarks',
            title: 'home',
            ui: "light",
            items: [{
                html: "<h1>Slide 1</h1>"
            }, {
                html: "<h1>Slide 2</h1>"
            }, {
                html: "<h1>Slide 3</h1>"
            }, {
                html: "<h1>Slide 4</h1>"
            }]
        });
        
        // BUILD MAIN NAVIGATION
        var navigation = new Ext.TabPanel({
            fullscreen: true,
            items: [carousel, {
                iconCls: 'info',
                title: 'print',
                html: 'replace this with contentEl'
            }],
            
            tabBar: {
                dock: 'bottom',
                scroll: {
                    direction: 'horizontal',
                    scrollbars: false
                },
                layout: {
                    pack: 'center'
                }
            }
        });
    }
});

[flashpro]

Hi Evant,

Thanx for the help... this is exactly what I was trying to do. Keep up the good work with Sencha (Touch).

Grt,
Edwart

[lijn]

what if i have a carousel and there are links in one "page" and i want to deeplink to a page from page 1..?

[lijn]

i've found a solution.. greetings!

[christiandersen]

Has anyone done this in Sencha Touch 2.0? Does anyone have some artikel which i general explains what and how to port stuff from Sencha Touch 1.0 to 2.0?