Problem with Card Layout "inside" a TabPanel

[aguerra10]

Hi,

I am having some problems when using a card layout panel as an item of a TabPanel.
The card layout panel shows all its items at once, instead of only the active one.

Some screenshots..

Screen shot 2011-11-24 at 5.45.53 PM.jpg




Screen shot 2011-11-24 at 5.46.18 PM.jpg



The problem appears in the Constituents section... Some Views code here...
The first is the TabPanel view and the second is the Constituents view.

Ext.define('MvcExample.view.DashboardView', {
	extend: 'Ext.TabPanel',
	
	requires: [
		'MvcExample.view.MainView',
	],
	
	config: {
		
		fullscreen: true,


    	tabBarPosition: 'bottom',
    
    	items: [
            {
				xtype: 'homeView',
                title: 'Dashboard',
                iconCls: 'home',
				layout: 'fit',
            },
			{
            	xtype: 'profileView',
                title: 'Constituents',
                iconCls: 'user',
				layout: 'fit',
			},
			{
            	xtype: 'profileView',
                title: 'Groups',
                iconCls: 'arrow_left',
				layout: 'fit',
			},
			{
            	xtype: 'profileView',
                title: 'Reports',
                iconCls: 'arrow_up',
				layout: 'fit',
			},
            {
            	xtype: 'settingsView',
                title: 'Settings',
                iconCls: 'settings',
				layout: 'fit',
            },
        ]
	}
	
});

Ext.define('MvcExample.view.ProfileView', {
	extend: 'Ext.Panel',
	
	xtype: 'profileView',
	config: {
		fullscreen: true,
		
		layout: {
      		type: 'card',
      		animation: {
        		type: 'slide',
        		direction: 'left',
        		duration: 500,
      		}
    	},
    items: [
        {
            html: "First Item"
        },
        {
            html: "Second Item"
        },
        {
            html: "Third Item"
        },
        {
            html: "Fourth Item"
        }
      ]	
	}
	
	
});

Thanks!! I am still new in Sencha Touch and probably making silly mistakes..

[AndreaCammarata]

Hi.
Are you using the Developer Preview 2 of Sencha Touch?

[aguerra10]

Hi.
Are you using the Developer Preview 2 of Sencha Touch?

Hi andreacammarata,

Yes I am...

[AndreaCammarata]

You just need to remove the

layout: 'fit'

config on your cards.
Take a look at the edited code:

Ext.Loader.require(['Ext.*']);


Ext.application({
    name: 'Sample',
    launch: function() {
	
		Ext.define('Sample.view.ProfileView', {
			extend: 'Ext.Panel',
			alias: 'widget.profileView',
			config: {
				layout: {
		      		type: 'card',
		      		animation: {
		        		type: 'slide',
		        		direction: 'left',
		        		duration: 500,
		      		}
		    	},
		    items: [
		        {
		            html: "First Item"
		        },
		        {
		            html: "Second Item"
		        },
		        {
		            html: "Third Item"
		        },
		        {
		            html: "Fourth Item"
		        }
		      ]	
			}
		});
	
	
		Ext.define('Sample.view.DashboardView', {
			extend: 'Ext.TabPanel',
			config: {
				fullscreen: true,
		    	tabBarPosition: 'bottom',
		    	items: [
		            {
						xtype: 'container',
		                title: 'Dashboard',
		                iconCls: 'home'
		            },
					{
		            	xtype: 'profileView',
		                title: 'Constituents',
		                iconCls: 'user'
					},
					{
		            	xtype: 'container',
		                title: 'Groups',
		                iconCls: 'arrow_left'
					},
					{
		            	xtype: 'container',
		                title: 'Reports',
		                iconCls: 'arrow_up'
					},
		            {
		            	xtype: 'container',
		                title: 'Settings',
		                iconCls: 'settings'
		            }
		        ]
			}


		});
		
		Ext.create('Sample.view.DashboardView', {
			fullscreen: true
		});
		
    }
});

[aguerra10]

You just need to remove the

layout: 'fit'

config on your cards.
Take a look at the edited code:

Ext.Loader.require(['Ext.*']);


Ext.application({
    name: 'Sample',
    launch: function() {
    
        Ext.define('Sample.view.ProfileView', {
            extend: 'Ext.Panel',
            alias: 'widget.profileView',
            config: {
                layout: {
                      type: 'card',
                      animation: {
                        type: 'slide',
                        direction: 'left',
                        duration: 500,
                      }
                },
            items: [
                {
                    html: "First Item"
                },
                {
                    html: "Second Item"
                },
                {
                    html: "Third Item"
                },
                {
                    html: "Fourth Item"
                }
              ]    
            }
        });
    
    
        Ext.define('Sample.view.DashboardView', {
            extend: 'Ext.TabPanel',
            config: {
                fullscreen: true,
                tabBarPosition: 'bottom',
                items: [
                    {
                        xtype: 'container',
                        title: 'Dashboard',
                        iconCls: 'home'
                    },
                    {
                        xtype: 'profileView',
                        title: 'Constituents',
                        iconCls: 'user'
                    },
                    {
                        xtype: 'container',
                        title: 'Groups',
                        iconCls: 'arrow_left'
                    },
                    {
                        xtype: 'container',
                        title: 'Reports',
                        iconCls: 'arrow_up'
                    },
                    {
                        xtype: 'container',
                        title: 'Settings',
                        iconCls: 'settings'
                    }
                ]
            }


        });
        
        Ext.create('Sample.view.DashboardView', {
            fullscreen: true
        });
        
    }
});

Thanks!! That worked!!

Could you please explain me why did the "fit" cause that behavior? As I mentioned before, I am still new in Sencha and I want to learn as much as possible. I would appreciate that.

I do thank you andreacammarata!!