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
    4,781
    Answers
    356
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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
    Answers
    11
    Vote Rating
    10
    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