View Full Version : [Bug] Collapse state for a stateful accordion layout

4 Aug 2011, 4:10 AM

Ext version tested:

Ext 4.0.5
Browser versions tested against:

Chrome 13.0.782.107

I have a panel with an accordion layout that allows multiple accordions to be opened. All the panels are stateful and remembers if they were collapsed before. However the accordion layout collapses all panels automatically if an expanded item has been already added to the component.
Steps to reproduce the problem:

See example at http://jsfiddle.net/netzpirat/ZruGH/
The result that was expected:

Panel 1 and Panel 2 should be expanded
The result that occurs instead:

Only Panel 1 is expanded, Panel 2 is collapsed
Test Case:

Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 300,
layoutConfig: {
titleCollapse: true,
multi: true
items: [{
title: 'Panel 1',
html: 'Panel content!',
collapsed: false
title: 'Panel 2',
html: 'Panel content!',
collapsed: false
title: 'Panel 3',
html: 'Panel content!',
collapsed: true
renderTo: Ext.getBody()


Screenshot or Video:

Debugging already done:

Accordion layout set collapsed from Panel 2 automatically to true when it already has added an expanded panel.
Possible fix:

The patch fixes this problem by evaluation the multi configuration option:

From c88bd235fd1b112c84a264952b6122ffe655a543 Mon Sep 17 00:00:00 2001
From: Michael Kessler <michi@netzpiraten.ch>
Date: Thu, 4 Aug 2011 14:07:01 +0200
Subject: [PATCH] Allow multiple expanded accordion components.

public/lib/ext4/src/layout/container/Accordion.js | 4 ++--
1 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/lib/ext4/src/layout/container/Accordion.js b/public/lib/ext4/src/layout/container/Accordion.js
index b80663c..84cc0a2 100644
--- a/public/lib/ext4/src/layout/container/Accordion.js
+++ b/public/lib/ext4/src/layout/container/Accordion.js
@@ -177,8 +177,8 @@ Ext.define('Ext.layout.container.Accordion', {
delete comp.height;
delete comp.flex;

- // If there is an expanded item, all others must be rendered collapsed.
- if (me.expandedItem !== undefined) {
+ // If there is an expanded item, all others must be rendered collapsed, except when multiple are allowed.
+ if (!me.multi && me.expandedItem !== undefined) {
comp.collapsed = true;
// Otherwise expand the first item with collapsed explicitly configured as false

Additional CSS used:

only default ext-all.css
Operating System:

OS X Lion

9 Aug 2011, 6:06 AM
I updated the post by applying the bug report template and added a live example at jsfiddle. I hope this helps to understand and reproduce the behavior.

12 Aug 2011, 8:59 AM
You we get a bug id assigned to this?

15 Aug 2011, 11:43 AM
It happened again. I found a bug in Ext JS and spent some time to debug it, made an executable, reproducible test case and reported it with as much information as I could provide. And what happens? I'm being ignored by Sencha.

Or is it my fault? Do I understand your business wrong? Should I use my purchased x-credit to report a bug in your product? So paying for the product and paying for reporting bugs?

I'd be happy if someone at Sencha could explain.