Carousel causing weird Titlebar bug

[camdagr8]

I'm developing an iPad app with Sencha Touch 2.1 and Phonegap and I have a really weird bug goin on.

I have a titlebar with a styled background image and a carousel in a container. The container's left value is set to 320, and is pushed off screen (on purpose). When the container's left value is changed to 0 (on a button click) the titlebar's background is missing in the portion that was off screen. If I scroll the carousel to the end and pull it past it's normal position, the background image restores to how it's suppose to be.

I've tried using base64, an actual image, and css3 gradient and in all 3 instances this happens.

Has anyone else had a problem with this? If so, what did you do to fix it?



Here's my styling for the titlebar:

/**
 * 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;
}

And my code:

// Content Panel

Ext.define('App.view.Content', {
    extend: 'Ext.Container',
    config: {
        id: 'content',
        width: '100%',
        height: '100%',
        left: 320,
        top: 0,
        zIndex: 10,
        layout: 'fit',
        cls: 'open',
        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'},
                ],
            },
        ]
    }
});

[mitchellsimoens]

Have you inspected the DOM to see what is going on, is it just the image width is not big enough?

Also, why is the carousel within a container? It doesn't need to be