hi,

i've been searching for some code to add a carousel to an overlay.
finally i found something (http://www.senchafiddle.com/#aXSPT)

the problem now is, when i display the overlay, it works fine, but the background isn't disabled.

this is how i show the overlay:

Code:
var overlay = Ext.create('LeaveRequest.view.TeamCalendarDetails');
Ext.Viewport.add(overlay);
overlay.show();
and this gets created:

Code:
Ext.define('LeaveRequest.view.TeamCalendarDetails', {
    extend : 'Ext.Carousel',

    config : {
        style : 'background-color: #FFFFFF;border: solid #003366;',
        scrollable : false,
        hideOnMaskTap : true,
        modal : true,
        centered : true,
        width : Ext.os.deviceType == 'Phone' ? 240 : 320,
        height : Ext.os.deviceType == 'Phone' ? 240 : 380
    },

    initialize : function() {
        this.callParent(arguments);
        this.addItems();

    },

    addItems : function() {
        var data = Ext.getStore('requestdetailstore').getData().all;
        html = '...' ;
            this.add({
                        xtype : 'panel',
                        scrollable : 'vertical',              
                        styleHtmlContent : true,
                        items : [{
                                    html : html
                                }, {
                                    xtype : 'button',
                                
                                    text : 'close',
                                    scope : this,
                                    handler : this.closeOverlay
                                }]

                    });
        }
    },

    closeOverlay : function() {
        this.destroy();
    }
});
i need the overlay, and the carousel, because the content is dependant of a store.
each record of the store gets displayed within the carousel.

any ideas?