PDA

View Full Version : grouptabpanel issues



rtirbany
5 Mar 2013, 9:11 AM
I'm trying to use the grouptabpanel and can't even get the contents of each of the tabpanel to appear. Using 4.1.1, and the 2011 version of the grouptabpanel - I couldn't find much info on the web...no errors in firebug, just empty panel body



items: [{
xtype: 'grouptabpanel',
activeGroup: 0,
items: [{
items: [{
title: 'Quick Reference',
style: 'padding: 10px;',
items: [{
xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
buttons: [{text: 'hi'}]
}]
}, {
title: 'Lookup',
style: 'padding: 10px;',
border: false,
items: {
xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
buttons: [{text: 'Save'}, {text: 'Cancel'}]
}
}]
}]
}]

mitchellsimoens
7 Mar 2013, 8:54 AM
Inspect the DOM. Is it just a layout/sizing issue?

rtirbany
7 Mar 2013, 11:32 AM
It seems that way. I can see the data in Firebug.

On the initial execution, I should get contents from the container, but I don't. Ext.getCmp(newTab) is undefined (newTab is just a string, and not in the DOM yet). Later on, this undefined gets assigned to me.activeTab.

(Ext.getCmp(newTab) is always undefined per my findings):


if (Ext.isString(cmp)) {
newTab = Ext.getCmp(newTab); //this sets newTab to undefined
}
if (newTab === me.activeTab) {
return false;
}

webga
22 May 2014, 6:16 AM
Hi, I have a similar trouble...
I'm trying to render the GroupTabPanel inside a a view which extend Ext.container.Viewport
When I click the tab the selection change, but active tab and active group are undefined, also when the component is loaded first time.

If I repoduce a sample used in the sencha try (http://try.sencha.com/extjs/4.0.7/examples/grouptabs/grouptabs/), it works (of course) may I miss some stuff in my code.
I can't figure it out, please, help me.

PS: I call my view from another controller after some checks by calling:

Ext.create('MyAppview.Viewport', { id: 'viewport' }).show();

here's my code:



Ext.define('MyApp.view.Viewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.viewport',

layout: 'border',

initComponent: function () {

console.log('MyApp.view.Viewport: Viewport initcomponent');

this.items = [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'center',
layout: 'fit',
items: [{
xtype: 'grouptabpanel',
activeGroup: 0,
id: 'my_groupTab',
items: [{
items: [{
title: 'Group 1',
iconCls: 'x-icon-configuration',
tabTip: 'Applications tabtip',
style: 'padding: 10px;',
html: 'Group 1 stuff here'
}]
}, {
items: [{
title: 'Group 2',
iconCls: 'x-icon-configuration',
tabTip: 'Roles tabtip',
style: 'padding: 10px;',
html: 'Group 2 stuff here'
}]
}, {
expanded: true,
items: [{
title: 'Group 3',
iconCls: 'x-icon-configuration',
tabTip: 'Configuration tabtip',
style: 'padding: 10px;',
html: 'Group 3 stuff here'
}]
}]
}]
}];

this.callParent(arguments);
}
});