1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    76
    Vote Rating
    0
    jop_008 is on a distinguished road

      0  

    Default Unanswered: Secnha carousel

    Unanswered: Secnha carousel


    Hi,

    I am having an application and try to do the following. I have a couple of photos and want them to be displayed in a carousel.
    I played with layout fit, flex parameters but always a blank page. Without any console error.
    It is the third button in the application you can find it here as a zip

    My viewport code is having a button bar at the bottom. The entire code of viewport.js:

    Code:
    Ext.define('MyApp.view.TitleBar_', {
        extend: 'Ext.TitleBar',
        xtype: 'titlebar_',
        config: {docked:'top'}
    });
    
    
    var photo_carousel2 = new Ext.Carousel({ 
       layout:'fit',     
       items: [                  
         new Ext.Panel({
             layout: 'hbox',
             items:[
                new Ext.Panel({html: '<p><img src="resources/imgs/terras avondsfeer.jpg"></p>'}),
                new Ext.Panel({html: '<p><img src="resources/imgs/terras avondsfeer.jpg"></p>'}),
                new Ext.Panel({html: '<p><img src="resources/imgs/terras avondsfeer.jpg"></p>'}),
             ]
         })
       ]}
     )
    
    
    var photo_carousel = new Ext.Carousel({
      flex:7.3,  
      centered: true,
                defaults: {
                   cls: 'card' 
                },
                items: [
                {
                html: '<p><img src="resources/imgs/terras avondsfeer.jpg"></p>',
                        cls:'card card1'
                },
                {
                html: '<p><img src="resources/imgs/woonkamer.jpg"></p>',
                        cls:'card card2'
                },
                {
                html: '<p><img src="resources/imgs/woonkamertv.jpg"></p>',
                        cls:'card card3'
                },
                {
                html: '<p><img src="resources/imgs/rez-de-chaussee.jpg"></p>',
                        cls:'card card4'
                },
                {
                html: '<p><img src="resources/imgs/premier_etage.jpg"></p>',
                        cls:'card card5'
                },
                {
                html: '<p><img src="resources/imgs/huis van onderen aanzicht.jpg"></p>',
                        cls:'card card6'
                },
                {
                html: '<p><img src="resources/imgs/fototerras.jpg"></p>',
                      cls:'card card7'
                },
                {             
                html: '<p><img src="resources/imgs/zwembad met ligbedden.jpg"></p>',
                      cls:'card card8'
                }
            ]
            });
    
    
    Ext.define('App.view.Caroussel', {
        extend: 'Ext.Panel',
        xtype: 'photo_caroussel',
        type:  'vbox',
        layout: 'fit',
        align: 'stretch',
        items: [photo_carousel]
    });
    
    
    Ext.define('App.view.Test', {
        extend: 'Ext.Panel',
        xtype: 'test',
    
    
        config: {
            layout: 'fit',
    
    
            items: [
                {
                    xtype: 'tabpanel',
                    tabBarPosition: 'top',
                    height: '100%',
                    width: '100%',
    
    
                    items: [
                        {
                            title: 'Algemeen',
                            iconCls: 'home',
                            layout: 'fit',
                            style: 'background: #dadada',
    
    
                            items: [
                                {
                                    xtype: 'container',
                                    scrollable: true,
                                    defaults: {
                                      styleHtmlContent: true
                                    },
    
    
                                    items: [
                                        {
                    html: 'Deze villa uit 2009 van totaal 180 m2, is door de eigenaar zodanig ontworpen, dat het u aan niets ontbreken zal. Nadat hij als echte Francofiel 25 jaar achtereen huizen huurden in het Zuiden van Frankrijk, wist hij precies hoe een ideaal vakantie huis er uit dient te zien. Hij heeft de daad bij het woord gevoegd en bouwde dit huis, naar zijn eigen wensen. U kunt daar nu van profiteren!'+
    'Stelt u zich voor lekker genieten in deze enerverende omgeving met rondom ruime (overdekte) terrassen en de beschikking over een eigen zwembad van 10 bij 5 meter. Winkelen kunt u in Saint Ambroix, stedelijk vertier vindt u in Avignon;Montpellier; Nimes en dichterbij in Ales. Oude dorpen met hun karakteristieke marktjes en imposante kastelen, zijn in de directe omgeving. Anduze, wereld beroemd vanwege haar speciale manier van potten bakken, bereikt u in een goed half uur.  De wijngebieden van de vijf Cru`s  van het zuidelijke Rhone gebied ( Chateau-neuf du pape; Lirac; Gigondas; Vacqueras en Tavel ) kunt u op &eacute;&eacute;n dag bezoeken.  Kinderen kunnen zich spelend en ravottend vermaken in boomhutten zie. Ook is het mogelijk om avontuurlijk deel te nemen aan "canyoning". Dit wordt ook georganiseerd door de mensen van le-grand-bois. Hier kunt u de details vinden. Een filmpje vindt u hier.'
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            title: 'Ligging',
                            iconCls: 'user',
                            layout: 'fit',
                            style: 'background: #cccccc',
    
    
                            items: [
                                {
                                    xtype: 'container',
                                    scrollable: true,
                                    defaults: {
                                      styleHtmlContent: true
                                    },
    
    
                                    items: [
                                        {
                                            html:
    'De villa, is zonnig gelegen, en biedt ruimte aan 6 personen. Het zwembad is vanaf elk terras goed zichtbaar (maximale diepte 1.50).' +
    'Als bijzonder element van dit huis noemen wij de aanwezigheid van een ruime sauna met . Dus mocht u zwaar hebben gewandeld, gefietst, gekanoed of gewielrend, dan biedt de sauna rust voor uw vermoeide spieren. De sauna is apart te huur voor 75 Euro per week. Omdat wij van mening zijn, dat het ook \'s nachts vakantie dient te zijn, is het huis voorzien van eerste klas boxsprings (6 in totaal).'
                                        },
                                    ]
                                }
                            ]
                        }, {
                            title: 'Vertrekken',
                            iconCls: 'user',
                            layout: 'fit',
                            style: 'background: #cccccc',
    
    
                            items: [
                                {
                                    xtype: 'container',
                                    scrollable: true,
                                    defaults: {
                                      styleHtmlContent: true
                                    },
                                    items: [
                                        {
                                            html:
                                              'De keuken is ruim en compleet en beschikt over een regelbare inductie kookplaat; een oven, een aparte magnetron en vaatwasser.'+
                                              'De woning heeft een ruim panorama view.  Dit werd mogelijk door de uit 3 delen bestaande schuifpui. Het terrein van 6000 m2 heeft volop privacy en een eigen parkeermogelijkheid. Ook al staat uw auto vlakbij, hij "verstoort" niet uw uitzicht.'+
                                              'Beneden loopt u vanuit de ruime slaapkamer direct een van de terrassen op. De verleiding om, nog vóór het ontbijt een duik te nemen, zal groot zijn. De badkamer beneden heeft een inloopdouche 2 wastafels een toilet en een ligbad.'+
                                              'Er is draadloos internet overal beschikbaar.<br/>'+
                                              'Boven vind je 2 ruime slaapkamers met toegang tot een breed balkon. De badkamer boven heeft een ,  2 wastafels en een apart toilet.'
                                        },
                                    ]
                                }
                            ]
                        }, {
                            title: 'Inventaris',
                            iconCls: 'user',
                            layout: 'fit',
                            style: 'background: #cccccc',
    
    
                            items: [
                                {
                                    xtype: 'container',
                                    scrollable: true,
                                    defaults: {
                                      styleHtmlContent: true
                                    },
    
    
                                    items: [
                                        {
                                            html:
                                              'Ligbedden, met ligkussens en stoelen voor op het terras zijn aanwezig<br/>'+
                                              'In de woning vindt u een lcd breedbeeld televisie aangesloten op de sateliet met Nederlandse zenders.'+
                                              'Wekelijks wordt het zwembad schoongemaakt. Het zwembad is geopend vanaf 1 mei tot 1 oktober.<br/><br/>'+
                                              '<ul><li>Overige inventaris</li>'+  
                                              '<li>wasmachine</li>'+
                                              '<li>ruime oven en combi magnetron</li>'+
                                              '<li>condensdroger</li>'+
                                              '<li>vaatwasser</li>'+
                                              '<li>movies (dvd) aanwezig voor het voorjaar en najaar</li>'+
                                              '<li>strijkplank + strijkijzer</li>'+
                                              '<li>Philips filter koffiezet apparaat</li>'+
                                              '<li>Philips senseo</li>'+
                                              '<li>Movie sound</li>'+
                                              '<li>Waterkoker</li>'+
                                              '<li>Afzuigkap</li>'+
                                              '<li>Keukenverlichting onder kastjes</li>'+
                                              '<li>Ruime kasten op elke slaapkamer</li>'+
                                              '<li>Terrasverlichting voor de lange zomeravonden</li></ul>'
                                        },
                                    ]
                                }
                            ]
                        }, {
                            title: 'Samenvatting',
                            iconCls: 'user',
                            layout: 'fit',
                            style: 'background: #cccccc',
    
    
                            items: [
                                {
                                    xtype: 'container',
                                    scrollable: true,
                                    defaults: {
                                      styleHtmlContent: true
                                    },
    
    
                                    items: [
                                        {
                                            html:
                                            '<ul style="list-style-type:square;margin-left:15px; margin-right:10px; margin-bottom:10px; margin-top:10px;">'+
                                            '<li>ruime woonkamer</li>'+
                                            '<li>goed uitgeruste open keuken</li>'+
                                            '<li>ruime beneden slaapkamer rechtstreeks toegang tot de badkamer</li>'+
                                            '<li>beneden ruime badkamer met inloopdouche</li>'+
                                            '<li>goede bedden (boxsprings)</li>'+
                                            '<li>draadloos internet</li>'+
                                            '<li>sfeervol ingericht</li>'+
                                            '<li>garage</li>'+
                                            '<li>sauna (optioneel 75 Euro per week)</li>'+
                                            '<li>boven badkamer met  en 2 wastafels</li>'+
                                            '<li>ruime opberg mogelijkheden</li>'+
                                            '<li>kwalitatief goed kinder kampeer bedje met alle toebehoren en kinderstoel te huur voor 15 Euro per week (excl. lakens etc.)</li></ul>'
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    });
    
    
    Ext.define('App.view.Prijzen', {
        extend: 'Ext.Panel',
        xtype: 'prijzen',
    
    
        config: {
            layout: 'fit',
    
    
            items: [
                    {
                    xtype: 'container',
                    scrollable: true,
                    defaults: {
                      styleHtmlContent: true
                    },
                    
                    items: [
                        {
                            html:
                                 '<ul style="list-style-type:circle;margin-left:15px; margin-right:10px; margin-bottom:10px; margin-top:10px;">'+
                                 '<li>Borg 500 Euro</li>'+
                                 '<li>Optionele sauna huur per week 75 Euro,</li>'+
                                 '<li>Stooktoeslag 50 Euro per week in de periode van 1 oktober tot 1 mei</li>'+
                                 '<li>Optioneel kinderset (kinderstoel, bedje en toebehoren) 15 Euro per week, dit is exclusief lakens en beddengoed.</li>'+
                                 '<li>Lakens en handoeken (1 grote en 1 kleine) 12 Euro verplicht per persoon per periode  (indien het kinderbedje wordt gehuurd, dan komt hier 9 euro bij).</li>'+
                                 '<li>Verplichte eindschoonmaak 90 Euro. De keuken wordt door u zelf schoon achter gelaten met uitgeruimde vaatwasser en het huisvuil wordt door u zelf weggebracht.</li></ul>'
                        }
                    ]
                }
            ]
        }
    });
    
    
    Ext.define('App.view.Samenvatting', {
        extend: 'Ext.Panel',
        xtype: 'samenvatting',
    
    
        config: {
            layout: 'fit',
    
    
            items: [
                    {
                    xtype: 'container',
                    scrollable: true,
                    defaults: {
                      styleHtmlContent: true
                    },
                    
                    items: [
                        {
                            html:
                            '<ul style="list-style-type:square;margin-left:15px; margin-right:10px; margin-bottom:10px; margin-top:10px;">'+
                            '<li>ruime woonkamer</li>'+
                            '<li>goed uitgeruste open keuken</li>'+
                            '<li>ruime beneden slaapkamer rechtstreeks toegang tot de badkamer</li>'+
                            '<li>beneden ruime badkamer met inloopdouche</li>'+
                            '<li>goede bedden (boxsprings)</li>'+
                            '<li>draadloos internet</li>'+
                            '<li>sfeervol ingericht</li>'+
                            '<li>garage</li>'+
                            '<li>sauna (optioneel 75 Euro per week)</li>'+
                            '<li>boven badkamer met  en 2 wastafels</li>'+
                            '<li>ruime opberg mogelijkheden</li>'+
                            '<li>kwalitatief goed kinder kampeer bedje met alle toebehoren en kinderstoel te huur voor 15 Euro per week (excl. lakens etc.)</li></ul>'
                        }
                    ]
                }
            ]
        }
    });
    
    
    Ext.define('Myapp.view.Viewport', {
        extend: 'Ext.tab.Panel',
    
    
        config: {
            fullscreen: true,
    
    
            tabBar: {
                docked: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
    
    
            defaults: {
                scrollable: true,
            },
    
    
            items: [
                {
                    title:'Home',
                    iconCls: 'home',
                    xtype:'test'
                },
                {
                    title: 'Prijzen',
                    scrollable: true,
                    iconCls: 'bookmarks',
                    xtype: 'prijzen',
                },
                { 
                    title: 'Villa comfort, Molieres sur Ceze',
                    iconCls: 'bookmarks',
                    xtype: 'titlebar_'
                },
                {
                    title: 'Foto\'s',
                    iconCls: 'bookmarks',
                    xtype: 'photo_caroussel' // here is my problem @#
                }
                ,
                {
                    title: 'Kalender',
                    iconCls: 'bookmarks',
                    xtype: 'sectionslist' // here I want a titlebar with listiems underneath
                }
                ,
                {
                    title:'Boeking',
                    iconCls: 'bookmarks',
                    xtype:'test'
                }
            ]
        }
    });
    http://members.chello.nl/jophof/forum/mvillacomfort.zip

    John
    Last edited by mitchellsimoens; 23 Apr 2012 at 6:38 AM. Reason: added [CODE] tags

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,206
    Answers
    3517
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Why not each item of the carousel be an Ext.Img component? It should then force the images to take up 100% height and width.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread