PDA

View Full Version : Nested Accordion



dbaliga
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.

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

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

http://www.p51labs.com/accordion/
(http://www.p51labs.com/accordion/)

bt_bruno
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:


Ext.create('Ext.Panel',{
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.