[FIXED-572] Missing buttons in collapsed panels

[Tom23]

Ext version tested:

Ext 3.1.0


Adapter used:

ext


css used:

only default ext-all.css



Browser versions tested against:

IE8
FF3
Safari 4


Operating System:

WinXP Pro


Steps to reproduce the problem:

Create a collapsed panel that contains another panel with buttons
Render the outer panel.
Expand the outer panel.
The inner panel's buttons are not rendered.


Test Case:



Ext.onReady(function () {

var config = {
items: [{
xtype: 'panel',
buttons: [{ text: 'inner Button' }],
items: [{
xtype: 'slider',
width: 300,
value: 150,
minValue: 0,
maxValue: 300
}]
}],
buttons: [{
text: 'outer Button'
}]
};

Ext.apply(config, { title: 'Default' });
var vispanel = new Ext.Panel(config);

Ext.apply(config, { title: 'Hidden', hidden: true });
var hiddenpanel = new Ext.Panel(config);

Ext.apply(config, { title: 'Collapsed', hidden: false, collapsed: true });
var collapsedpanel = new Ext.Panel(config);

vispanel.render(Ext.getBody());
hiddenpanel.render(Ext.getBody()); // nice !
collapsedpanel.render(Ext.getBody());

hiddenpanel.show();
collapsedpanel.expand();
//collapsedpanel.on('expand', collapsedpanel.doLayout); // doesn't solve the actual problem
});



I'm pretty sure this has something to do with Ext.Container.doLayout() and Ext.Container.afterRender(). Quite frankly, I don't understand what's happening there :(

[aw1zard2]

Animal made an override for the Layout Browser example missing a button on the Absolute Layout Form example you might want to try it and see if that fixes it.

:)

[Tom23]

Thanks!

Unfortunately, Animal's hack (http://www.extjs.com/forum/showthread.php?p=419889) doesn't fix the problem.

[Animal]

try



Ext.override(Ext.Panel, {
afterRender : function(){
var c;
if(this.floating && !this.hidden){
this.el.show();
}
if(this.title){
this.setTitle(this.title);
}
if(this.collapsed){
this.collapsed = false;
c = true;
}
Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last
// Collapse after it has been rendered (if its not in an ownerCt, this will have layed it out)
if (c) {
this.collapse(false);
}
this.initEvents();
}
});

[Tom23]

Almost there. Now the inner button is rendered, but the outer button is missing.
But I think you're on a distinguished road. :D

I fumbled around a bit and found that this works pretty well:


Ext.override(Ext.Panel, {
afterRender : function(){
if (this.floating && !this.hidden) {
this.el.show();
}
if (this.title) {
this.setTitle(this.title);
}
Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last
this.initEvents();
if (this.collapsed) {
this.collapsed = false
this.collapse(false);
}
}
});
Any objections?

[Tom23]

Ah no, this doesn't work. In case of several nested panels, expansion becomes very choppy in Firefox with this hack.

[Jabe]

+1

I've got an initially hidden fieldset, but after expanding its (complex) children are not layouted correctly.

Pretty sure this is the same bug.

My workaround is doing a forced layout:

onExpand: function() {
Ext.form.FieldSet.prototype.onExpand.apply(this, arguments);
// HACK: Fix layout of items in the initially collapsed fieldset...
this.doLayout(true, true);
}

PS:
Ext 3.1.1

[evant]

The initial test case works correctly with 3.1.1. If you'd like to post a test case I'd be happy to look at it.

[Jabe]

Thanks for your quick reply, and sorry for hijacking this thread. :)

Have a look at the following code, which is based on the "Multi Column, Nested Layouts and Anchoring" sample (form/dynamic.js). You can also modify the sample by wrapping the four textfields in a collapsed fieldset.



TestPanel = Ext.extend(Ext.form.FormPanel, {

initComponent: function() {

Ext.apply(this, {
padding: 8,
labelAlign: 'top',
defaultType: 'textfield',
items: {
xtype: 'fieldset',
collapsible: true,
collapsed: true,
title: 'More Options',
items: {
xtype: 'container',
layout: 'column',
items: [
{
xtype: 'container',
layout: 'form',
columnWidth: 0.5,
defaultType: 'textfield',
items: {
name: 'A',
anchor: '100%',
fieldLabel: 'A'
}
},
{
xtype: 'container',
layout: 'form',
columnWidth: 0.5,
defaultType: 'textfield',
items: {
name: 'B',
anchor: '100%',
fieldLabel: 'B'
}
}
]
},
onExpand: function() {
Ext.form.FieldSet.prototype.onExpand.apply(this, arguments);
// HACK: Fix layout of items in the initially collapsed fieldset...
// this.doLayout(false, true);
}
}
});

TestPanel.superclass.initComponent.apply(this, arguments);
}
});

(new TestPanel()).render(Ext.getBody());


Cheers,
Jabe

[Jamie Avins]

Tom23 & Jabe, these are now both working properly without modification in the 3.2.x branch in SVN.

[Jabe]

Cool, thanks. Looking forward to getting my hands on.