1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    61
    Vote Rating
    0
    aguerra10 is on a distinguished road

      0  

    Default Problem with Card Layout "inside" a TabPanel

    Problem with Card Layout "inside" a TabPanel


    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.

    Code:
    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',
                },
            ]
    	}
    	
    });
    Code:
    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..

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi.
    Are you using the Developer Preview 2 of Sencha Touch?
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    61
    Vote Rating
    0
    aguerra10 is on a distinguished road

      0  

    Default


    Quote Originally Posted by andreacammarata View Post
    Hi.
    Are you using the Developer Preview 2 of Sencha Touch?
    Hi andreacammarata,

    Yes I am...

  4. #4
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    You just need to remove the

    Code:
    layout: 'fit'
    config on your cards.
    Take a look at the edited code:

    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
    		});
    		
        }
    });
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    61
    Vote Rating
    0
    aguerra10 is on a distinguished road

      0  

    Default


    Quote Originally Posted by andreacammarata View Post
    You just need to remove the

    Code:
    layout: 'fit'
    config on your cards.
    Take a look at the edited code:

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

Thread Participants: 1