Results 1 to 3 of 3

Thread: Add Carousel inside DIV with renderTo

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    1
    Vote Rating
    0
      0  

    Default 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
    Location
    Italy
    Posts
    1,395
    Answers
    148
    Vote Rating
    24
      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
    4
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •