1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    1
    Vote Rating
    0
    rgk is on a distinguished road

      0  

    Default Unanswered: Add Carousel inside DIV with renderTo

    Unanswered: Add Carousel inside DIV with renderTo


    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!
    Code:
    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'
        });

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Answers
    148
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Answers
    6
    Vote Rating
    2
    cyberwombat is on a distinguished road

      0  

    Default


    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.

Thread Participants: 2

Tags for this Thread