View Full Version : Nested Accordion

15 Oct 2011, 12:16 PM
I am trying to build a nested accordion . The vertically nested accordion needs to be scrollable as I will be dynamically adding content to it. Can somebody suggest an approach for this?

Any help would be appreciated! Thanks.

16 Oct 2011, 10:18 AM
What do you mean by nested accordion?

16 Oct 2011, 11:07 AM
An accordion inside an accordion. I'm trying to build something similar to this example


16 Oct 2011, 5:06 PM
I really tried to develop a solution, but it doesn't seems that accordion was meant to have autoHeight, neither being nested. I can't picture any good interface with nested accordions, maybe you can point us out.

Anyway, here is the code I tested:

width: 200,
height: 200,
layout: 'accordion',
renderTo: Ext.getBody(),
items: [{
title: 'Normal Item',
html: '...sample content...'
title: 'Nested Parent',
layout: 'anchor',
autoScroll: true,
items: [{
xtype: 'panel',
anchor: '-20',
autoHeight: true,
layout: {
type: 'accordion',
fill: false
defaults: {
collapsed: true,
autoHeight: true
items: [{
title: 'Nested 1',
html: 'content 1'
title: 'Nested 2',
html: 'content 2'
title: 'Nested 3',
html: 'content 3'
title: 'Nested 4',
html: 'content 4'

I would go by rethinking the interface. If it is not possible, maybe setting a fix height, and increasing it each time a new item is added to the accordion.