1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    dbaliga is on a distinguished road

      0  

    Default Unanswered: Nested Accordion

    Unanswered: Nested Accordion


    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.

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,033
    Vote Rating
    213
    Answers
    481
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    What do you mean by nested accordion?

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    dbaliga is on a distinguished road

      0  

    Default


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

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

  4. #4
    Sencha User bt_bruno's Avatar
    Join Date
    Mar 2008
    Location
    Redwood City, CA
    Posts
    154
    Vote Rating
    10
    Answers
    11
    bt_bruno will become famous soon enough

      0  

    Default


    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:

    Code:
    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.

Thread Participants: 2