[4.1.3] Accordion Layout not working when dynamically adding items

[CSC-Germany]

REQUIRED INFORMATION


Ext version tested:

• Ext 4.1.3

Browser versions tested against:

• Chrome
• IE9
• FF

DOCTYPE tested against:

• n/a

Description:

• According Layout produces a weird handling, when items are added after instantiation. The accordion handling is totally broken then.

Steps to reproduce the problem:

• create a Accordion Panel with items in it
• after the Panel is rendered, add another item the Accordion Panel

The result that was expected:

• added item will be handled in the accordion style..

The result that occurs instead:

• multiple items are expanded
• collapse/expand style within the accordion panel totally weird

Test Case:

I have enhanced the accordion layout example with a button in the center region to add a simple item the accordion panel...

   ..
   ..
     var viewport = Ext.create('Ext.Viewport', {            layout : 'border' ,
            items : [accordion , {
                region : 'center' ,
                margins : '5 5 5 0' ,
                cls : 'empty' ,
                bodyStyle : 'background:#f1f1f1' ,
                items : [{
                    xtype : 'button' ,
                    text : 'Add' ,
                    handler : function() {
                        accordion.add({
                            xtype : 'panel' ,
                            title : 'added Accordion Item' ,
                            html : '<empty panel>' ,
                            cls : 'empty'
                        })
                    }
                }]
            }]
        });
   ..
   ..

HELPFUL INFORMATION


Screenshot or Video:

• 20121029_Accordion_Bug.png

See this URL for live test case: http://


Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css
• custom css (include details)

Operating System:

• Windows

[mitchellsimoens]

Thank you for the report.

[stuchy]

Here a temporary fix. Add this to your listeners of your items inside the accordion.

                        beforeexpand: function(e) {
                            e.ownerCt.items.each(function(item) {
                                if (item != e) item.collapse();
                            });
                        } 

[zzhouag]

It can works in extjs-4.1.0, but when change to 4.1.3, the same problem is happen. Thanks!

[jmcolyer]

Is there an override for this? The one mentioned above doesn't work. Also, I couldn't find the jira entry in any of the recent release notes.

[Saskia]

I've got the same problem and didn't find any resolution yet.
The fix from stuchy didn't work for me.

Any ideas?

[zzhouag]

It's already fixed in 4.2.0 later, or you can override Ext.layout.container.Accordion class using 4.1.0 or 4.2.0 version

[Saskia]

This works fine. Thanks a lot for your fast reply

[jmcolyer]

I was able to get it working by adding by the following listener to each of my accordion items.

// workaround for EXTJSIV-7642 (not working)
listeners: {
   expand: function(item) {
           item.doLayout();
       }
    }
}