PDA

View Full Version : [SOLVED]Grouped Tabs question



rhowardjr
24 Jul 2009, 6:19 AM
I was working with the grouped tabs example and noticed something and wondered why it is this way. It is color coded in red for out of place alignment. The blue colored code is what I would expect to see in the example. Explanation is under code snippet.


var viewport = new Ext.Viewport({
layout:'fit',
items:[{
xtype: 'grouptabpanel',
tabWidth: 130,
activeGroup: 0,
items: [{
mainItem: 1,
items: [{
title: 'Tickets',
layout: 'fit',
iconCls: 'x-icon-tickets',
tabTip: 'Tickets tabtip',
style: 'padding: 10px;',
items: [new SampleGrid([0,1,2,3,4])]
}, {
xtype: 'portal',
title: 'Dashboard',
tabTip: 'Dashboard tooltip',
items:[{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Grid in a Portlet',
layout:'fit',
tools: tools,
items: new SampleGrid([0, 2, 3])
},{
title: 'Another Panel 1',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px',
items:[{
title: 'Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
}]
}, {
title: 'Subscriptions',
iconCls: 'x-icon-subscriptions',
tabTip: 'Subscriptions tabtip',
style: 'padding: 10px;',
layout: 'fit',
items: [{
xtype: 'tabpanel',
activeTab: 1,
items: [{
title: 'Nested Tabs',
html: Ext.example.shortBogusMarkup
}]
}]
}, {
title: 'Users',
iconCls: 'x-icon-users',
tabTip: 'Users tabtip',
style: 'padding: 10px;',
html: Ext.example.shortBogusMarkup
}]
}, {
expanded: true,
items: [{
title: 'Configuration',
iconCls: 'x-icon-configuration',
tabTip: 'Configuration tabtip',
style: 'padding: 10px;',
html: Ext.example.shortBogusMarkup
}, {
title: 'Email Templates',
iconCls: 'x-icon-templates',
tabTip: 'Templates tabtip',
style: 'padding: 10px;',
html: Ext.example.shortBogusMarkup
}]
}]
}]
});If you look at the example via web Dashboard is above Tickets on the grouped tab. (Showed in the pic below.)
But when looking at the code behind it the Tickets code is above the Dashboard code. But on the Configuration/Email Templates group tab it shows up correctly in the code with the Configuration code being above the Email Templates code. Was there some reasoning behind this cause to me this seems just not to be right. LOL Or am I not getting my brain to work correctly since it is early morning for me.

~o)~o)~o) (Coffee cups so far this morning)

Thanks,
Ron Howard, Jr.

rhowardjr
24 Jul 2009, 7:08 AM
After closer review and 4th ~o) I kept over looking the mainItem: 1, line in the code.

Gotta love it when the body wants to work but the brain takes a vacation just cause its friday.

LOL

Ron