PDA

View Full Version : adding items to a TabPanel help



profunctional
13 Jul 2010, 6:59 PM
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
13 Jul 2010, 8:39 PM
Over-nesting.

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

profunctional
14 Jul 2010, 6:18 AM
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
14 Jul 2010, 6:32 AM
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
14 Jul 2010, 6:51 AM
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
14 Jul 2010, 6:53 AM
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
14 Jul 2010, 7:21 AM
Thanks Evan, working off your example I got it working.

merry andrew
15 Jul 2010, 2:09 PM
Yes! Thank you ^_^

lchurch
2 Sep 2010, 1:52 PM
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
2 Sep 2010, 1:59 PM
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
21 Sep 2010, 10:47 PM
I remember really appreciating evant's example in .93 but it doesn't work for me in .95. Has anyone else tried?

evant
21 Sep 2010, 10:59 PM
You need to explicitly pass items as an array now.

merry andrew
22 Sep 2010, 1:58 AM
I'm not sure I understand what you mean. Could you please give a brief code example?

evant
22 Sep 2010, 2:03 AM
// bad
items: {
}

// good
items: [{
}]

merry andrew
22 Sep 2010, 2:36 AM
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
22 Sep 2010, 9:35 AM
What's a more elegant way to add items now?