View Full Version : [INFOREQ] Accordion Animation

24 Feb 2010, 12:33 PM

The accordion layout have 2 issue that I've noticed.
Animate must be true and sequence:true does not help (btw, sequence is ignored...)

First, if you click to fast to collapse or expand, it will result on many panels opened at the same time (click REALLY fast on a slow machine, it should do the trick easily, or simply pragmatically ask an expand to all panels in a row.

Second, an accordion layout in a collapsible panel collapsed don't render when you expand something.

Good luck. I've worked many hours trying to find a work around. I didn't found one in many weeks...

Jamie Avins
24 Feb 2010, 12:55 PM
Can you provide any specific test cases for the issues you listed? Also, what browser version and Ext version are you using?

24 Feb 2010, 1:05 PM
I've figured out why there is this issue. Really basic. You can collapse a panel to the left and still use it by clicking (not in the expand button but anywhere else on the panel) on it. This will show the "unanchored" panel. I've sniffed events and when you collapse the panel, it's size is changed. The new size will be (for the case that the panel is to the left) "undefined,int" : (e.g. undefined,400).

Now, it's _impossible_ for a (not rendered) panel inside the accordion to know what's the good size to take, because there is an undefined size!!

Jamie Avins
24 Feb 2010, 1:36 PM
I don't believe the original intention of the slideOut was to provide a fully layed out view into the hidden panel. As support for that was never included. It is something we could look into for a feature request though.

24 Feb 2010, 1:42 PM
Here is the working thing with both bugs. Both issues are in FF and IE.


Collapsed panel issue :

start by collapsing the panel (collapsed to the left)
don't uncollapse it, but click on side to make it appear.
open a panel contained in the accordion.
The size is not full. If it was not html, size would have been 0. When there is html inside it seams to take the "html source" basic size.

"other scenario"

open the second panel in accordion.
repeat previous steps.
Now you see that the first and second panels have full size.

Accordion animation collapse failed

Fast click on panel in accordion.
You'll have many panels opened at the same time (bad).
Note that sequence is activated. (sequence:true)

<title>Accordion Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
.empty .x-panel-body {
color: gray;
<script type="text/javascript">
Ext.onReady(function() {

var item1 = new Ext.Panel({
title: 'Accordion Item 1',
html: '&lt;empty panel&gt;',

var item2 = new Ext.Panel({
title: 'Accordion Item 2',
html: '&lt;empty panel&gt;',

var item3 = new Ext.Panel({
title: 'Accordion Item 3',
html: '&lt;empty panel&gt;',

var item4 = new Ext.Panel({
title: 'Accordion Item 4',
html: '&lt;empty panel&gt;',

var item5 = new Ext.Panel({
title: 'Accordion Item 5',
html: '&lt;empty panel&gt;',

var accordion = new Ext.Panel({
margins:'5 0 5 5',
collapsible: true,
width: 210,
layoutConfig: {
//sequence: true,
// Layout animation was introducing a bug in collapsible panel
animate: true,
items: [item1, item2, item3, item4, item5]

var viewport = new Ext.Viewport({
accordion, {
margins:'5 5 5 0',
html:'<br/><br/>&lt;empty center panel&gt;'
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->

24 Feb 2010, 1:45 PM
It's fine for me if it's a feature request. But slideout don't seam to have a purpose without this :) So yes of course, I would like to have this...