card layout (setActiveItem) inside tabPanel

[goangus]

Hi there,

I am trying to setup a tabPanel. On the first card, i have a number of buttons and I want to display various cards on the click of each button i.e. :



App.views.ViewportActive = Ext.extend(Ext.TabPanel, {
id: "mainViewport", fullscreen: true,
defaults: {
scroll: 'vertical',
},
initComponent: function() {
this.items = [{
xtype: 'panel',
title: 'My profile',
items: {xtype: 'App.views.MyPanel}
},{
panel2....
},{
panel3....
}




App.views.MyPanel = Ext.extend(Ext.Panel, {
initComponent: function() {
this.layout = 'card';
this.home = new Ext.Panel({
id: 'home',
layout: {type: "vbox", align: 'stretch', pack:'start'},
items: [{
xtype: "panel",
layout: 'card',
html: "Blah Blah"
},{
xtype: 'panel',
layout: {type: 'vbox'},
defaults: {xtype: 'button'},
items: [
{text: info', handler: function(){
App.views.viewport.backButton.show()
myPanel.setActiveItem('infoPage', {type: 'slide', direction: 'left'})
}},
]
}]
})

this.infoPage = new Ext.Panel({
id: "infoPage",
html: "Blah Blah.....",
});
this.items = [this.home, this.infoPage]


This seems to work if i set both the tabPanel and the "MyPanel" to
fullscreen: true, however the fullscreen attribute sets the height of "MyPanel" to the height of the viewport so I lose some of the content if it is taller than the viewport. If i dont set fullscreen, the content isn't rendered at all. Is it possible to have a panel with a card layout inside a tabPanel?

Thanks for any help

Paul

[mitchellsimoens]

Your App.views.MyPanel should not have fullscreen as it is a child of another component. The issue is it doesn't have a height. Right now, you are nesting the App.views.MyPanel instance in another panel (you probably don't have to and would recommend not) so you can do one of two things:


this.items = [{
xtype: 'panel',
title: 'My profile',
layout: 'fit',
items: {xtype: 'mypanel}
},{

Or the preferred way:


this.items = [{
xtype: 'mypanel',
title: 'My profile'
},{

Based on your code, you don't have a xtype defined for your App.views.MyPanel. You need to have


Ext.reg('mypanel', App.views.MyPanel');

[goangus]

this.items = [{
xtype: 'panel',
title: 'My profile',
layout: 'fit',
items: {xtype: 'mypanel}
},{

Thank you so much... easy when you know how!! I actually tried layout: fit, but I put it in the wrong place!! I totally get it now.



Based on your code, you don't have a xtype defined for your App.views.MyPanel. You need to have


Ext.reg('mypanel', App.views.MyPanel');

I do have that code but didn't copy that far down the page :)

[goangus]

It still doesn't show...

The problem is that the

App.views.MyPanel = Ext.extend(Ext.Panel, { needs to have a layout of card, not fit. Otherwise I cannot use setActiveItem. The minute I set it to layout: card, the content disappears :(