PDA

View Full Version : GroupTabPanel as a tab in a TabPanel



nicobarten
16 Sep 2009, 1:41 AM
Hi all,

I want to have a GroupTabPanel inside a tab of a TabPanel, like this:



// some code
{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
deferredRender: true,
layoutOnTabChange: true,
items:[
{
title: 'Management',
margins: '0 0 0 0',
layout: 'fit',
items: [
{
xtype: 'grouptabpanel',
tabWidth: 130,
activeGroup: 0,
items: [
{
mainItem: 0,
items: [
{
title: 'Dashboard',
layout: 'fit',
iconCls: 'user',
tabTip: 'Dashboard',
html: 'lalala'
},
{
title: 'Sub1',
layout: 'fit',
iconCls: 'user',
tabTip: 'Sub1',
html: 'lala'
}]
}]
}]
}]
// more code....
However, somehow the rendering goes wrong (it uses the wrong css classes?). The first 'Dashboard' item hasn't the bold dark-blue color, but looks like a normal hyperlink in HTML (blue). Also, the icons won't appear.

I'm sure i'm doing nothing wrong with the linking to the icons, and the css file is used well for the rounding borders... so i'm really wondering how to fix this.:-?

nicobarten
16 Sep 2009, 11:26 PM
nobody? :s

nicobarten
17 Sep 2009, 1:12 AM
A picture of it:

http://img6.imageshack.us/img6/5052/grouptabs.jpg

So, my biggest problem is that it shows 'Management' and 'Support' as a 'normal' hyperlink css style... i guess the parent tabpanel does this, but i don't know how to change this.

Animal
17 Sep 2009, 1:14 AM
I'm guessing you are missing some of the CSS that is needed with this UX. You could always debug it to see.

nicobarten
17 Sep 2009, 2:38 AM
yes, but how can i change which css it uses? Because it seems to me that the tabpanel's css overrides the GroupTab(Panel)'s css. But i just don't know how to change this.

:(

Animal
17 Sep 2009, 3:17 AM
I can't make a GroupTabPanel render in a TabPanel!

I just modified examples/grouptabs/grouptabs.js to be the following code, and it does NOT render the GroupTabPanel:



Ext.onReady(function() {
Ext.QuickTips.init();

// create some portlet tools using built in Ext tool ids
var tools = [{
id:'gear',
handler: function(){
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];

var viewport = new Ext.Viewport({
layout:'fit',
items: {
xtype: 'tabpanel',
activeTab: 0,
items: [{
title: 'GroupTab as a tab',
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:[{
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
}]
}]
}]
}
});
});

nicobarten
18 Sep 2009, 12:59 AM
@Animal: I don't understand your reply... is it the solution to the problem (i think not however), is it a copy from another member who had the same problem, or did you came with your own example?

Someone who can help with this? Greatly appreciated.

Animal
18 Sep 2009, 1:28 AM
It is examples/grouptabs/grouptabs.js modified to be in a TabPanel.

And it does not work! There's a bug somewhere. In Ext.

nicobarten
18 Sep 2009, 5:26 AM
Could this thread be moved to the Bugs subforum then?