Carousel causing weird Titlebar bug

[camdagr8]

I'm creating an iPad app using Sencha Touch 2.0 and Phonegap 2.3 and experiencing a really weird bug with a styled titlebar and a carousel inside a container. I'm doing a slide left/right to expose a menu that is behind the container (like the facebook app).

The container's left value is 320 and partially off screen, when it's left is set to 0 and the container is completely within view, it looks like this:

Screen Shot 2013-02-08 at 8.27.12 PM.png

Here's my CSS:

/**
 * Toolbar
 */
.x-toolbar {
    padding: 0 !important;
    -webkit-box-shadow:  0px -3px 10px 5px rgba(0, 0, 0, 0.3);
            box-shadow:  0px -3px 10px 5px rgba(0, 0, 0, 0.3);

}
.x-toolbar.x-navigation-bar {
    border: none;
    height: 50px;
    background: url(./assets/titlebar_bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    padding: 0 !important;
}
/* Toolbar title text */
.x-toolbar.x-navigation-bar .x-title {
    color: #FCFCFC;
    font-size: 24px;
    font-weight: normal !important;
    font-family: 'Arial';
    text-shadow: 0px 1px 2px #000000;
}

.x-toolbar.x-navigation-bar .z-back-button .x-badge {
    margin-top: 5px !important;
    padding-top: 1px !important;
    padding-bottom: 2px !important;
}

.x-toolbar.x-navigation-bar .z-back-button .x-button-label {
    height: 26px;
    color: #D0D0D0;
    font-size: 12px;
    margin-left: 16px;
    font-weight: bold;
    font-family: 'Arial';
    padding: 6px 10px 0 2px;
    text-transform: uppercase;
    background-repeat: repeat-x;
    text-shadow: 2px 2px 2px #000000;
    border-radius: 0px 8px 8px 0px;
    -webkit-border-radius: 0px 6px 6px 0px;
}

/* Toolbar button */
.x-toolbar.x-navigation-bar .z-button {
    line-height: 50px;
    color: #FCFCFC;
    font-family: 'Arial';
    font-size: 32px;
    font-weight: normal;
    text-transform: uppercase;
    -webkit-border-radius: 8px;
    background-repeat: repeat-x;
    text-shadow: 0px 1px 2px #000000;
    padding: 6px 14px;
}
.x-toolbar.x-navigation-bar .x-button-pressing .x-button-label{
    opacity: 0.25;
}
.x-toolbar.x-navigation-bar .z-button-left {
    background-image: url('./assets/titlebar_left.png');
    background-position: top right;
    background-repeat: no-repeat;
    padding: 6px 14px 6px 12px;
}

.x-toolbar.x-navigation-bar .z-button-right {
    background-image: url('./assets/titlebar_right.png');
    background-position: top left;
    background-repeat:  no-repeat;
    padding: 6px 12px 6px 14px;
}

Here's my code:

// Content Panel

Ext.define('App.view.Content', {
    extend: 'Ext.Container',
    config: {
        id: 'content',
        width: '100%',
        height: '100%',
        left: 0,
        top: 0,
        zIndex: 10,
        layout: 'fit',
        cls: 'closed',
        style: 'background-color: #666666;',
        items: [
            {
                xtype: 'titlebar',
                id: 'titlebar',
                docked: 'top',
                title: 'Lesson Title',
                items: [
                    {
                        xtype: 'button',
                        id: 'btn-menu',
                        baseCls: 'z-button',
                        cls: 'z-button-left',
                        html : '<i class="icon-list"></i>',
                        align: 'left',
                    },
                    {
                        xtype: 'button',
                        id: 'btn-toc',
                        baseCls: 'z-button',
                        cls: 'z-button-right',
                        html : '<i class="icon-list-2"></i>',
                        align: 'right',
                    },
                ],
                listeners: {
                    initialize: function (e) {
                        this.element.addListener('swipe', Core.titleSwipe, this, e);
                    }
                },
            },
            {
                xtype: 'carousel',
                id: 'main',
                layout: 'fit',
                items: [
                    {html: 'test 1', style: 'background-color: #FF0000'},
                    {html: 'test 2', style: 'background-color: #00FF00'},
                    {html: 'test 3', style: 'background-color: #0000FF'},
                    {html: 'test 4', style: 'background-color: #FF0000'},
                    {html: 'test 5', style: 'background-color: #00FF00'},
                    {html: 'test 6', style: 'background-color: #0000FF'},
                ],
            },
        ]
    }
});

[camdagr8]

I set a zIndex on my titlebar to 50 and 0 on my carousel and that seems to fix the issue!