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?

    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,768
    Vote Rating
    776
    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

    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 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