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,395
    Answers
    148
    Vote Rating
    23
    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
    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
    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