1. #1
    Ext User
    Join Date
    Aug 2010
    Location
    Groningen, The Netherlands
    Posts
    3
    Vote Rating
    0
    flashpro is on a distinguished road

      0  

    Question Carousels inside items of a tabbar?

    Carousels inside items of a tabbar?


    Hi there,

    I'm trying to create a user interface in which you navigate with a TapBar at the bottom of the screen. When you click a tab in this bar, you will be redirected to a "page" (item of the TabBar). In this page I'd like to show a Carousel. The TabBar should remain at the bottom of the screen. The Carousel fills the space above it.

    This is what I came up with (and does not work ):

    Code:
    Ext.setup({
        tabletStartupScreen: "images/tablet_startup.png",
        icon: "images/icon.png",
        glossOnIcon: true,
        
        onReady: function() {
            // BUILD CAROUSEL (SHOWN INSIDE TABPANEL)
            var carousel = new Ext.Carousel({
                ui: "light",
                items: [{
                    html : "<h1>Slide 1</h1>"
                },
                {
                    html : "<h1>Slide 2</h1>"
                },
                {
                    html : "<h1>Slide 3</h1>"
                },
                {
                    html : "<h1>Slide 4</h1>"
                }]
            });
        
            // BUILD MAIN NAVIGATION
            var navigation = new Ext.TabPanel({
                items : [{
                    iconCls : 'bookmarks',
                    title : 'home',
                    contentEl : carousel
                },{
                    iconCls : 'info',
                    title : 'print',
                    html : 'replace this with contentEl'
                }],
                
                tabBar: {
                    dock: 'bottom',
                    scroll: {
                        direction: 'horizontal',
                        scrollbars: false
                    },
                    layout: {
                        pack: 'center'
                    }
                }
            });
            
            // BUILD MAIN STRUCTURE
            new Ext.Panel({
                fullscreen: true,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                defaults: {
                    flex: 1
                },
                items: [navigation]
            });
        }
    });
    Any help would be appreciated. Please be gentle, I'm just starting to use Sencha Touch...

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,164
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You want something more like this:

    Code:
    Ext.setup({
        tabletStartupScreen: "images/tablet_startup.png",
        icon: "images/icon.png",
        glossOnIcon: true,
        
        onReady: function(){
            // BUILD CAROUSEL (SHOWN INSIDE TABPANEL)
            var carousel = new Ext.Carousel({
                iconCls: 'bookmarks',
                title: 'home',
                ui: "light",
                items: [{
                    html: "<h1>Slide 1</h1>"
                }, {
                    html: "<h1>Slide 2</h1>"
                }, {
                    html: "<h1>Slide 3</h1>"
                }, {
                    html: "<h1>Slide 4</h1>"
                }]
            });
            
            // BUILD MAIN NAVIGATION
            var navigation = new Ext.TabPanel({
                fullscreen: true,
                items: [carousel, {
                    iconCls: 'info',
                    title: 'print',
                    html: 'replace this with contentEl'
                }],
                
                tabBar: {
                    dock: 'bottom',
                    scroll: {
                        direction: 'horizontal',
                        scrollbars: false
                    },
                    layout: {
                        pack: 'center'
                    }
                }
            });
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Aug 2010
    Location
    Groningen, The Netherlands
    Posts
    3
    Vote Rating
    0
    flashpro is on a distinguished road

      0  

    Thumbs up This was very helpful

    This was very helpful


    Hi Evant,

    Thanx for the help... this is exactly what I was trying to do. Keep up the good work with Sencha (Touch).

    Grt,
    Edwart

  4. #4
    Ext User
    Join Date
    Aug 2010
    Posts
    2
    Vote Rating
    0
    lijn is on a distinguished road

      0  

    Default


    what if i have a carousel and there are links in one "page" and i want to deeplink to a page from page 1..?

  5. #5
    Ext User
    Join Date
    Aug 2010
    Posts
    2
    Vote Rating
    0
    lijn is on a distinguished road

      0  

    Default


    i've found a solution.. greetings!

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    6
    Vote Rating
    1
    christiandersen is on a distinguished road

      0  

    Default Has anyone tried this in Sencha Touch 2.0?

    Has anyone tried this in Sencha Touch 2.0?


    Has anyone done this in Sencha Touch 2.0? Does anyone have some artikel which i general explains what and how to port stuff from Sencha Touch 1.0 to 2.0?

Similar Threads

  1. set width of items in tabbar
    By peeyush81 in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 10 Sep 2010, 3:00 PM
  2. Replies: 2
    Last Post: 30 Jul 2010, 6:50 PM
  3. How to align items inside an fbar in ext 3.0?
    By elishnevsky in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 24 Apr 2009, 7:54 AM
  4. 2 items inside a container with fit layout
    By mysticav in forum Ext 2.x: Help & Discussion
    Replies: 12
    Last Post: 8 Nov 2008, 1:26 AM
  5. CheckBox items inside a ComboBox
    By gounis in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 8 Jan 2008, 8:39 AM

Thread Participants: 3

Tags for this Thread