Sencha Touch 2 - TabPanel does not work in MVC designed App

0
votes

simple question for you today...

This works:

var carousel = Ext.create('Ext.Carousel', {
            fullscreen: 'true',

            //load in views view clean instantiation using
            // the widget.alias's defined in each view... yea
            // For some reason, putting flex on these components... oh...
            // Have to call directly in by just the xtype since these are just
            // references..
            items: [
                { 
                    xtype: 'Main'
                },
                { 
                    xtype: 'CommentList'
                }                
            ]

This does NOT work:

var tabpanel = Ext.create('Ext.TabPanel', {
            fullscreen: 'true',
            tabBarPosition: 'bottom',

            defaults: {
                styleHtmlContent: true
            },

            //load in views view clean instantiation using
            // the widget.alias's defined in each view... yea
            // For some reason, putting flex on these components... oh...
            // Have to call directly in by just the xtype since these are just
            // references..
            items: [
                { 
                    xtype: 'Main',
                    title: 'The Main',
                    iconCls: 'user'
                },
                { 
                    xtype: 'CommentList',
                    title: 'Comments',
                    iconCls: 'user'
                }                
            ]

        });

As you can see, they are pretty much the same except one is a TapPanel (with the required default configs added) and the other is a carousel.

Everything else is exactly the same.... This is in the app.js of my Sencha Touch 2.0 app designed following the MVC architecture.

The result of the not-working TabPanel is that I only see the first view (Main) and no tab-bar appears in the bottom of the screen.

Any ideas what my problem might be?

2
javascriptmodel-view-controllersencha-touchextjssencha-touch-2

2 Answers

1
votes

I am not sure if this is an issue but in my code the line is: 

Ext.create("Ext.tab.Panel", {

Not:

Ext.create('Ext.TabPanel', {
0
votes

Fullscreen should be fullscreen: true instead of fullscreen: 'true'. You could also add this code to make them switch:

cardSwitchAnimation: {type: "fade", duration: 1000},
layout: "card",

Didn't test it, but it worked for me (got it from a snippet of my own code)