Panel docked to bottom of an accordion breaks when the accordion animates [Archive]

gregwoods

12 Oct 2012, 8:44 AM

I'm having an issue with the accordion layout since upgrading from 4.0.2 to 4.1.1. Our application uses accordions, and those accordions often contain footers via a dockedItems/bottom configuration. What has started happening is that, as soon the accordion switches its current view, the no longer displays properly.

Before:
http://cl.ly/image/3l3q0S3e2V0p

After clicking an accordion header (Notice the footer has changed):
http://cl.ly/image/2E1F1h3h3I1m

And here is the sample code I used to reproduce the bug:

<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs-4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="extjs-4.1.1/ext-debug.js"></script>
</head>
<body>
<script>
Ext.application({
name: 'HelloExt',
launch: function() {
var accordion = Ext.create('Ext.panel.Panel', {
layout:'accordion',
items:[
{
xtype:'panel',
title:'Test',
html:'Hello, World!'
},
{
xtype:'panel',
title:'Test',
html:'Hello, World!'
},
{
xtype:'panel',
title:'Test',
html:'Hello, World!'
}
],
dockedItems:[
{
xtype:'panel',
html:'This should be at the bottom',
dock:'bottom',
collapsible:false
}
]
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
title: 'Hello Ext',
items:[accordion],
height: 400
});
}
});
</script>
</body>
</html>

Any advice would be much appreciated!

scottmartin

12 Oct 2012, 10:39 AM

Please try the following:

Ext.application({
name: 'HelloExt',
launch: function() {
var accordion = Ext.create('Ext.panel.Panel', {
flex: 1,
layout: 'accordion',
items: [{
xtype: 'panel',
title: 'Test',
html: 'Hello, World!'
}, {
xtype: 'panel',
title: 'Test',
html: 'Hello, World!'
}, {
xtype: 'panel',
title: 'Test',
html: 'Hello, World!'
}]
});

var panel = Ext.create('Ext.panel.Panel', {
html: 'This should be at the bottom',
height: 20
});

Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'stretch'
},
title: 'Hello Ext',
items: [accordion, panel]
});
}
});

Scott

gregwoods

15 Oct 2012, 5:32 AM

Hi Scott.

Thanks for your input. I had considered using a vbox, however I am trying to avoid making any major alterations to the structure of my app. My app is actually a lot more complex than the simplified example I posted, and my experience with Ext JS so far has been that even minor layout changes can have cascading effects.

What concerns me the most is that this particular layout worked fine prior to my upgrading to 4.1.1. Hoping to find a workaround to make my existing code work as expected, rather than having redo all my accordions.

scottmartin

15 Oct 2012, 6:01 AM

4.1 corrected a lot of problems with layouts. This includes layouts were allowed even if configured incorrectly (4.0.x). If you feel this is a bug, please submit a bug report and it will be reviewed by our dev team.

http://www.sencha.com/forum/showthread.php?138165-How-to-report-a-bug

Scott.

gregwoods

16 Oct 2012, 8:03 AM

Took a while but I managed to convert my components to use vbox. Seems to be working ok. I'd recommend that approach to anyone running into this issue.

Bug report submitted here: http://www.sencha.com/forum/showthread.php?246088-4.1.1-Item-docked-to-bottom-of-an-accordion-breaks-after-accordion-slide

Thanks!