PDA

View Full Version : [OPEN-559] Bug with group tab panel, when using it inside regular tab panel



sjmittal
10 Feb 2010, 11:52 PM
Hi,
I was going through the ux grouptabpanel under:
ext-3.1.1\examples\grouptabs\grouptabs.html

It is working fine, however when I make a minor modification and try to place the grouptabpanel as a tab inside another tabpanel, it breaks.

Note you can add tabpanel inside one of the tab of grouptabpanel, however you cannot add grouptabpanel as a tab inside some other tabpanel.

Please find the code attached.

You just have to replace this code in the file:
ext-3.1.1\examples\grouptabs\grouptabs.js


/*!
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
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: [{
xtype: 'grouptabpanel',
tabWidth: 130,
title: 'group tab panel',
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
}]
}]
}]
}]
});
});
Let me know what could be the reason for this issue. I tried to fix this in multiple ways using deferedRender and layoutOnTabChange properties, but it does not work.

The issue is mostly in the following line of code in ux\GroupTab.js

this.on('beforerender', function(){
this.groupEl = this.ownerCt.getGroupEl(this);
}, this);
groupEl is returned as null.

Let me know if anyone of you have any solution for this issue.

Thanks
Sachin

mystix
11 Feb 2010, 2:20 AM
[ moved from 3.x Ux and Plugins to 3.x Bugs ]