CODEWITHSUNDEEP
extjssencha-touchsencha-touch-2
zemar
zemar

Reputation: 49

How to add Carousel inside Tab Panel - Sencha Touch 2

I am trying to create a menu view in which there will be two toolbars above and three carousel sheets in the middle + another toolbar at the bottom which have several different icons. I used Ext.tab.Panel in which i tried to add three carousel sheets so one can swap over and see menus. I could not able to add carousel into my tab panel. I have tried alot but no result. Here is what I have done.

Ext.define('GS.view.Home', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: ['Ext.TitleBar', 'Ext.Carousel'],
    config: {
        fullscreen: true,
        scrollable: 'vertical', 
        defaults: {flex: 1},        
        tabBarPosition: 'bottom',
        items: [
            {
                title: 'Welcome',
                iconCls: 'home',
                styleHtmlContent: true,
                scrollable: true,

                items: {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Mobile App'
                },
                items:[
                    {
                        xtype: 'carousel',
                        direction: 'horizontal',

                        items: [
                            {
                                xtype: 'tabpanel',
                                styleHtmlContent: true,
                                style: 'background-color: black',   
                            },
                            {
                                xtype: 'tabpanel',
                                styleHtmlContent: true,
                                style: 'background-color: orange',  
                            },
                        ],
                    }
                ]
            },
            {
                title: 'Get Started',
                iconCls: 'action',
                items: [
                    {
                        docked: 'bottom',
                        xtype: 'titlebar',
                        title: 'Getting Started'
                    },
                    {
                        xtype: 'video',
                        url: 'http://av.vimeo.com/64284/137/87347327.mp4?                        token=1330978144_f9b698fea38cd408d52a2393240c896c',
                        posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
                    }
                ]
            }
        ]
    }
});

Upvotes: 1

Views: 1934

Answers (1)

Volodymyr
Volodymyr

Reputation: 181

The "items" property are duplicated from the first tab ("Welcome"), this is incorrect definition there should be only one.

Ext.define('GS.view.Home', {
  extend: 'Ext.tab.Panel',
  xtype: 'main',
  requires: ['Ext.TitleBar', 'Ext.Carousel'],
  config: {
    fullscreen: true,
    scrollable: 'vertical', 
    tabBarPosition: 'bottom',
    items: [ {
        docked: 'top',
        xtype: 'titlebar',
        title: 'Mobile App'
    },{
        title: 'Welcome',
        iconCls: 'home',
        xtype: 'carousel',
        direction: 'horizontal',
        defaults: {
            xtype: 'tabpanel',
            styleHtmlContent: true
        },
        items: [{
            style: 'background-color: black',   
        },{
            style: 'background-color: orange',  
        }]
    },{
        title: 'Get Started',
        iconCls: 'action',
        items: [{
            docked: 'bottom',
            xtype: 'titlebar',
            title: 'Getting Started'
        },{
            xtype: 'video',
            url: 'http://av.vimeo.com/64284/137/87347327.mp4?                        token=1330978144_f9b698fea38cd408d52a2393240c896c',
            posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
        }]
    }]
  }
});

Upvotes: 3

Related Questions