Add Carousel inside DIV with renderTo

[rgk]

I am currently trying to add a carousel inside a dynamic DIV that is defined in the HTML attribute of a Panel. When I do this I can see that the carousel is there, but the styling is all set to 0 for the size. I have a feeling the the carousel CSS does not get added properly when implemented this way. Can someone please let me know what I am doing wrong or show me another approach? Below is some code showing the currently definition, if more information is needed please let me know.

I appreciate it!

AS.appDetailPanel = new Ext.Panel({
    id: 'appDetailPanel',
    scroll: 'vertical',
    dockedItems : [
        AS.appDetailToolbar,
    ],
    html: ''
});

AS.appDetailContentPanel = new Ext.Panel ({
        id: 'appDetailContentPanel',
        dock:'top',
        dockedItems:[],
        html: "\
            <div id=\"appDetailsDiv\" class=\"appDetails\">\
                <div class=\"adImageSection\">\
                    <img src=\"" + storeData [num].iconURL + "\">\
                </div>\
                <div class=\"adTitleSection\">\
                    <div class=\"adTitle\">" +
                    storeData [num].name + "\
                    </div>\
                    <div class=\"adAuthor\">" +
                    storeData [num].author + "\
                    </div>\
                    <!-- rating -->\
                    <!-- badges -->\
                </div>\
                <div class=\"adDownload\">\
                    <a href=\"itms-services://?action=download-manifest&url=" +
                        storeData [num].url + "\">INSTALL</a>\
                </div>\
                <div id=\"adDescDiv\" class=\"adDescription\">" +
                    storeData [num].description + "\
                </div>\
            </div>"
    });
        
        AS.appDetailPanel.addDocked (AS.appDetailContentPanel,1);
        
        
    // Create a Carousel of App Images
    AS.appImages = new Ext.Carousel({
        defaults: {
        cls: 'app-image'
        },
        items: [{
        title: 'Image 1',
        html: 'Image 1'
        },
        {
        title: 'Image 2',
        html: 'Image 2'
        },
        {
        title: 'Image 3',
        html: 'Image 3'
        }],
        height:300,    
        width:400,
        layout: {
          type: 'hbox',
          align: 'center',
          pack: 'center'
        },
        fullscreen:false,
        renderTo:'adDescDiv'
    });

[AndreaCammarata]

Hi.
That's not the best way to do that.
I suggest you to create a master container panel with "vbox" layout, and then place inside it your Detail and you Images panel as items.

Hope this helps.

[cyberwombat]

What happens if you are working from a tpl with data? I have not been able to add tpl to an item - only to the main config and I cannot use any items in conjunction.