adding items to a TabPanel help

[profunctional]

I have created a tabPanel, and I'm trying to add a formPanel that is defined as a var to it. The code looks like this:



var ticketAddPanel = new Ext.TabPanel({
fullscreen: true,
// type: 'light',
tabBar: {
dock: 'bottom',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'center'
}
},
cls: 'card1',

items: [
{
iconCls: 'bookmarks',
title: localStorage.getItem('TicketLabel'),
items: ticketAddForm,

}


The form is defined as ticketAddForm. But the tabPanel is still blank. What is missing? Thanks in advance.

[evant]

Over-nesting.

The form is a panel, so don't wrap it in a panel without a layout.

[profunctional]

I added the line:

layout: 'card'

and the form is still not rendered in the panel. Do you have any documentation/samples on adding content that is not just html?

Thanks.

[evant]

No, you're misunderstanding. Adding a layout doesn't magically do anything, a layout is responsible for positioning child components.

In the example you have, there's no layout on the tab, so it can't size the child items:



Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function(){
new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
items: [{
xtype: 'container',
title: 'Tab 1',
layout: 'fit',
items: {
xtype: 'fieldset',
title: 'Favorite color',
defaults: {
xtype: 'radio'
},
items: [{
name: 'color',
label: 'Red'
}, {
name: 'color',
label: 'Blue'
}, {
name: 'color',
label: 'Green'
}, {
name: 'color',
label: 'Purple'
}]
}
}, {
title: 'Tab 2',
html: '2',
cls: 'card2'
}, {
title: 'Tab 3',
html: '3',
cls: 'card3'
}]
});
}
});

[profunctional]

I apologize for misunderstanding. I thought the advantage of SenchaTouch was supposed to automagically layout the items without having to do this manually. In the code you provided, it would require that I define my form inside the Tab item. This would be quite messy and difficult to read. If I define the form outside the scope of the TabPanel, shouldn't there be a way for me to add it to the tabPanel using the items? Here is what I did, using your layout: 'fit'


var ticketAddPanel = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'center'
}
},
cls: 'card1',

items: [
{
iconCls: 'bookmarks',
title: localStorage.getItem('TicketLabel'),
layout: 'fit',
items: ticketAddForm
},

The form still doesn't render onto the panel. What is missing?

[evant]

You can do exactly that:



Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function(){

var foo = new Ext.form.FormPanel({
items: {
xtype: 'fieldset',
title: 'Favorite color',
defaults: {
xtype: 'radio'
},
items: [{
name: 'color',
label: 'Red'
}, {
name: 'color',
label: 'Blue'
}, {
name: 'color',
label: 'Green'
}, {
name: 'color',
label: 'Purple'
}]
}
});

new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
items: [{
xtype: 'container',
title: 'Tab 1',
layout: 'fit',
items: foo
}, {
title: 'Tab 2',
html: '2',
cls: 'card2'
}, {
title: 'Tab 3',
html: '3',
cls: 'card3'
}]
});
}
});

[profunctional]

Thanks Evan, working off your example I got it working.

[merry andrew]

Yes! Thank you ^_^

[lchurch]

The last bit of code that was posted was what go me over the hump of forms in tabs; that would be a great extra example for newbies like myself!

[evant]

There isn't anything special about forms in tabs or carousel in tabs or list in tabs in tabs in tabs in tabs.

They are all Components/Containers that can be nested arbitrarily, but I agree there needs to be some more info regarding how they fit together.

[merry andrew]

I remember really appreciating evant's example in .93 but it doesn't work for me in .95. Has anyone else tried?

[evant]

You need to explicitly pass items as an array now.

[merry andrew]

I'm not sure I understand what you mean. Could you please give a brief code example?

[evant]

// bad
items: {
}

// good
items: [{
}]

[merry andrew]

Thank you ^_^


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {

var foo = new Ext.form.FormPanel({
items: [{
xtype: 'fieldset',
title: 'Favorite color',
defaults: {
xtype: 'radio'
},
items: [{
name: 'color',
label: 'Red'
}, {
name: 'color',
label: 'Blue'
}, {
name: 'color',
label: 'Green'
}, {
name: 'color',
label: 'Purple'
}]
}]
});

new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
items: [
{
xtype: 'container',
title: 'Tab 1',
layout: 'fit',
items: [
{
xtype: 'fieldset',
title: 'Favorite color',
defaults: {
xtype: 'radio'
},
items: [
{
name: 'color',
label: 'Red'
}, {
name: 'color',
label: 'Blue'
}, {
name: 'color',
label: 'Green'
}, {
name: 'color',
label: 'Purple'
}
]
}
]
}, {
title: 'Tab 2',
html: '2',
}, {
title: 'Tab 3',
html: '3',
}
]
});
}
});

Yikes, that does not copy+paste well ;_;

[merry andrew]

What's a more elegant way to add items now?