1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    2
    Vote Rating
    0
    cmbrandt is on a distinguished road

      0  

    Default Unanswered: Flexible space and carousel

    Unanswered: Flexible space and carousel


    I've got some HTML content that is longer than a full page in height. At the end of this content, I'd like to include a horizontal carousel. Every attempt I make shows the HTML content, but I can't get the carousel to work properly.
    Here's where I'm at code-wise...


    Code:
    Ext.create('Ext.Container', {
        fullscreen: true,
        scrollable: true,
        items: [
            {
                xtype: 'panel',
                html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>',
                style: 'background-color: #2E99FC'
            },
            {
                xtype: 'carousel',
                items: [
                    {
                        html : 'Item 1',
                        style: 'background-color: #5E99CC'
                    },
                    {
                        html : 'Item 2',
                        style: 'background-color: #759E60'
                    },
                    {
                        html : 'Item 3',
                        style: 'background-color: #FF0000'
                    }
                ]
            }
         ]
    });
    Any help greatly appreciated.

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

      0  

    Default


    Hi.
    You have more then a solution to achieve that.
    You can set your container layout to "vbox" type and with "stretch" align config like follows:

    Code:
    Ext.create('Ext.Container', {
    		    fullscreen: true,
    		    scrollable: true,
    			layout: {
    				type: 'vbox',
    				align: 'stretch'
    			},
    		    items: [
    		        {
    		            xtype: 'panel',
    					flex: 0.5,
    		            html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>',
    		            style: 'background-color: #2E99FC'
    		        },
    		        {
    		            xtype: 'carousel',
    					flex: 0.5,
    		            items: [
    		                {
    		                    html : 'Item 1',
    		                    style: 'background-color: #5E99CC'
    		                },
    		                {
    		                    html : 'Item 2',
    		                    style: 'background-color: #759E60'
    		                },
    		                {
    		                    html : 'Item 3',
    		                    style: 'background-color: #FF0000'
    		                }
    		            ]
    		        }
    		     ]
    		});
    Or you can just set the layout type to "fit" and dock the carousel on the bottom, giving it a height value:

    Code:
    Ext.setup({
        onReady: function() {
            
    		Ext.create('Ext.Container', {
    		    fullscreen: true,
    		    scrollable: true,
    			layout: 'fit',
    		    items: [
    		        {
    		            xtype: 'panel',
    		            html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>',
    		            style: 'background-color: #2E99FC'
    		        },
    			],
    			dockedItems: [
    		        {
    		            xtype: 'carousel',
    					dock: 'bottom',
    					height: 200,
    		            items: [
    		                {
    		                    html : 'Item 1',
    		                    style: 'background-color: #5E99CC'
    		                },
    		                {
    		                    html : 'Item 2',
    		                    style: 'background-color: #759E60'
    		                },
    		                {
    		                    html : 'Item 3',
    		                    style: 'background-color: #FF0000'
    		                }
    		            ]
    		        }
    		     ]
    		});
    		
    	}
        
    });
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

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

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    2
    Vote Rating
    0
    cmbrandt is on a distinguished road

      0  

    Default


    Due to the size of the images, I'm hoping to avoid having them on-screen (either docked or in vbox) all the time...

    Imagine tryign to reproduce http://itunes.apple.com/us/app/angry...343200656?mt=8 -- text on top, scroll down to a horizontal carousel, then more text below.

    Is it possible to do something that mimics that?

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi