Sencha Touch Carousel and TabPanel

Question

I want to have a view with a TabPanel and inside a Carousel with two cards.

Like this:

var view = Ext.define("abril16.view.Main2", {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar', 'Ext.carousel.Carousel'],
config: {
    tabBarPosition: 'bottom', 
    items: [{
        title: 'Home',
        iconCls: 'home',
        styleHtmlContent: true,
        scrollable: true,
        layout: 'fit',
        flex: 1,
        items: {
            docked: 'top',
            xtype: 'titlebar',
            title: 'Beetoom',
        },
    },
    {
        title: 'Discover',
        iconCls: 'action',
        scrollable: true,
        items: [{
            docked: 'top',
            xtype: 'titlebar',
            title: 'Select',
            layout: 'fit',
            flex: 1,
        }, 
        {
            docked: 'top',
            xtype: 'titlebar',
            title: 'Discover',
        },
        {
            xtype: 'carousel',
            items: [{   
                            xtype: 'checkboxfield',
                            name: 'Hola',
                            label: 'Hola'
                        },
                        {
                            xtype: 'checkboxfield',
                            name: 'Action',
                            label: 'Adventure'
                        }
                    ]
                }

                ]
    }
        ]
    }

            });

The problem is that nothing happens here. There are no syntax errors, but there is no layout displayed and instead the carousel I have a blank background inside the panel.

Thank you very much.

score 0 · Answer 1 · answered Apr 28 '12 at 03:59

I tested your code. Here's what I have observed from your code.

Why you require two titlebars ['Select','Discover'] in your second tab of 'Discover'. I think, you added titlebar two times in your 'Discover' tab. It absolutely makes no sense to have two titlebars for the same tab.

Include the Discover tab code like this,

 {
        title: 'Discover',
        iconCls: 'action',
        styleHtmlContent:true,
        layout:'card',
        items: [
            {
                docked: 'top',
                xtype: 'titlebar',
                title: 'Discover',
            },
            {
            xtype: 'carousel',
            items: [
                {   
                  xtype: 'checkboxfield',
                  name: 'Hola',
                  label: 'Hola'     
                },
                {
                   xtype:'checkboxfield',
                   name:'Action',
                   label:'Adventure'    
                }
             ]
          }
        ]
 }

Sencha Touch Carousel and TabPanel

1 Answers1