Nested Accordion

[dbaliga]

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]

What do you mean by nested accordion?

[dbaliga]

An accordion inside an accordion. I'm trying to build something similar to this example

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

[bt_bruno]

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.