PDA

View Full Version : Working with Panels using the GroupTabs example



liri
26 Nov 2010, 5:28 AM
Hey guys,

I'm totally new to ExtJS (I'm a backend PHP developer) and I'm trying to build upon the GroupTabs example http://dev.sencha.com/deploy/ext/examples/grouptabs/grouptabs.html to create a sort of widgets dashboard application.

My first attempt to customize the example is to simply add new place-holder containers for the panels so that it isn't just a 1/3,1/3,1/3 panels across the screen but also there will be a 1/1 container at the top and the bottom (as well as 2/3 and 1/3) but I'm having some difficulties understanding how to do that.


Here is the modification I have made to the standard example though it isn't working as expected.


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 tabtip',
items:
[{
items:
[{
columnWidth:1,
style:'padding:10px 0 10px 10px',
items:
[{
title: 'Grid in a Portlet',
layout:'fit',
tools: tools,
items: new SampleGrid([0, 2, 3])
}]
}],
},{


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
}]
}]
}]
});




Hoping someone can help out...