PDA

View Full Version : [3.2] Bug? The layout does not render correctly if the component starts hidden.



j.bruni
16 Aug 2010, 6:42 AM
The following code works.


Ext.onReady(function(){
new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'tabpanel',
id: 'mytabpanel',
activeTab: 0,
// hidden: true,
items: {
title: 'Test',
layout: 'border',
items: [{
xtype: 'panel', region: 'center', minWidth: 687
},{
xtype: 'panel', region: 'east', width: 306,
layout: 'accordion',
title: 'Informations',
items: [
{ title: 'Panel 1', html: '<p>Panel content!</p>' },
{ title: 'Panel 2', html: '<p>Panel content!</p>' },
{ title: 'Panel 3', html: '<p>Panel content!</p>' }
]
}]
}
}
});
// Ext.getCmp('mytabpanel').show();
});We have a Viewport. Inside it, a TabPanel. There is only a single tab, which is the active one.

This tab is a Panel with border layout, containing an empty center region, and an accordion Panel in the east region.

Just see it in action: http://www.jbruni.com.br/extjs/test1.html

Now, if we just uncomment the couple of commented (and highlighted) lines in the code above (remove the "//"), the accordion in the east region does not render correctly anymore.

As you can also see: http://www.jbruni.com.br/extjs/test2.html

Where is the Panel 3? If we resize the browser window, it re-renders correctly.

My tabbed panel needs to start hidden... what should I do to apply this correction with code, after showing the tabpanel?

I tried "doLayout", with no success. Help me!

I also found this recent bug thread, that may be related:
http://www.sencha.com/forum/showthread.php?107069-BorderLayout-east-height-is-bigger-that-should-be

Any help appreciated. Thanks!

j.bruni
16 Aug 2010, 7:36 AM
My workaround was to create a class:


.hide { visibility: hidden }

And instead of setting "hidden" to "true", I coded:


Ext.getCmp('mytabpanel').addClass('hide');

Instead of calling the "show" method, I used:


Ext.getCmp('mytabpanel').removeClass('hide');

Worked for me.

Thanks!