View Full Version : Bug in 'accordion' layout when using 'fill: false'

5 May 2013, 5:16 AM
I suspect there is a bug with the 'accordion' layout when using 'fill: false'.
The ExtJs version I'm using is 4.1.1 and to my understanding the bugs with 'fill:false' were supposed to be fixed.

Steps to reproduce:
In the code-
1) Create several panels under one panel which is defined with the accordion layout
2) Each panel will contain a grid which will load when the panel is expanded

In the browser-
Expand one panel and before the animation finishes click on another panel.
It seems that since the animation did not complete an exception is thrown.
The exception is thrown in-
ext-all-debug.js line 18735 => me.dom.style.height = me.addUnits(height);

Code snippets:

Ext.define('containerPanel', {
xtype: 'containerPanel',
extend: 'Ext.panel.Panel',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
flex: 1,
layout: {
type: 'accordion',
multi: true,
fill: false
items: [
xtype: 'panelWithGrid', // The grid loads when the panel is expanded
xtype: 'panelWithGrid', // The grid loads when the panel is expanded
xtype: 'panelWithGrid', // The grid loads when the panel is expanded

Please let me know if you are able to reproduce the bug.

5 May 2013, 3:31 PM
There's not really enough info here. Can you post a runnable test case?

Also, does the issue occur if you run it with the latest 4.2.0 build?

6 May 2013, 4:39 AM
I can't send you my code because it's composed of a lot of classes.

Let me describe you the situation more clearly -
I have 2 different views that load different components to the main panel in the middle, which contains accordion panels.
When I click on an accordion panel it loads data from the server.
If while it's loading the data I change the view (and clear the middle panel of components) and then return to the previous view, the accordion throws an exception.
The error occurs when I change the view while data is being loaded from the server.

The exception is on line- me.dom.style.height = me.addUnits(height);

in the function:

setHeight : function(height, animate) {
var me = this;
height = me.adjustHeight(height);
if (!animate || !me.anim) {
me.dom.style.height = me.addUnits(height);
else {
if (!Ext.isObject(animate)) {
animate = {};
to: {
height: height
}, animate));
return me;

The line with exception is caught in an infinite loop and causes the accordion to halt.

The error occurs also in the latest resources that I downloaded today- 4.2.0.

11 May 2013, 11:31 PM
So I'm guessing you don't have an answer for me?