PDA

View Full Version : Problem with Card Layout "inside" a TabPanel



aguerra10
24 Nov 2011, 11:53 AM
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..

29551




29552



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
25 Nov 2011, 3:11 AM
Hi.
Are you using the Developer Preview 2 of Sencha Touch?

aguerra10
25 Nov 2011, 4:32 AM
Hi.
Are you using the Developer Preview 2 of Sencha Touch?

Hi andreacammarata,

Yes I am...

AndreaCammarata
25 Nov 2011, 5:57 AM
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
25 Nov 2011, 6:08 AM
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!!