disable background of carousel in overlay

[cassiopeia]

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:

var overlay = Ext.create('LeaveRequest.view.TeamCalendarDetails');
Ext.Viewport.add(overlay);
overlay.show();

and this gets created:

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?

[AndreaCammarata]

Hi,
the best solution here is to place your carousel inside a "fit" layout overlay panel, then from your controller, get the reference to it, and loop through your store records using the function

store.each()

to add all the cards you need.
The Carousel itself doesn't have the right styles to be displayed as an overlay without having a container.

[cassiopeia]

is there no way to manually create a blur layer and activate it when you display the carousel?