1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    176
    Vote Rating
    2
    Answers
    4
    renganathan is on a distinguished road

      0  

    Post Answered: Collapse all the panels in the accordion by default

    Answered: Collapse all the panels in the accordion by default


    Hi everyone,

    I want to collapse all the panels in the accordion by default. For me first panel always active.


    i tried various methods like

    activeOnTop: true;

    collapsed: false

    Nothing has worked for me .......


    Guys please suggest how to fix the problem?
    Thanks,

    RENGANATHAN M G

  2. Hi @renganathan! I was reading Accordion.js source code and it doesn't seems that we have a native option for doing this. For default, at least one item in accordion layout will be expanded:

    Code:
    // If there is an expanded item, all others must be rendered collapsed.
    if (me.expandedItem !== undefined) {
        comp.collapsed = true;
    }
    // Otherwise expand the first item with collapsed explicitly configured as false
    else if (comp.hasOwnProperty('collapsed') && comp.collapsed === false) {
        comp.flex = 1;
        me.expandedItem = i;
    } else {
        comp.collapsed = true;
    }
    But we can try to hack this I did a test...I added into my accordion panel a hidden item that is expanded. This way I made it possible to have all panels collapsed at first. Check it out:

    Code:
    new Ext.Panel({
    	width: 200,
    	height: 300,
    	renderTo: Ext.getBody(),
    	bodyStyle: 'border-top:none;', // << border hack
    	layout: {
    		type: 'accordion'
    	},
    	items: [{
    		xtype: 'panel', // << fake hidden panel
    		hidden: true,
    		collapsed: false
    	},{
    		title: 'Item 1',
    		html: 'Content 1'
    	},{
    		title: 'Item 2',
    		html: 'Content 2'
    	},{
    		title: 'Item 3',
    		html: 'Content 3'
    	}]
    });
    I attached the final result. There is some border issues, that you could solve with CSS rules.
    Attachment 28697

    Of course you could try to rewrite Accordion.js and make a custom layout. Would be more elegant, but give you more work.

    Cheers!

  3. #2
    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

      1  

    Default


    Hi @renganathan! I was reading Accordion.js source code and it doesn't seems that we have a native option for doing this. For default, at least one item in accordion layout will be expanded:

    Code:
    // If there is an expanded item, all others must be rendered collapsed.
    if (me.expandedItem !== undefined) {
        comp.collapsed = true;
    }
    // Otherwise expand the first item with collapsed explicitly configured as false
    else if (comp.hasOwnProperty('collapsed') && comp.collapsed === false) {
        comp.flex = 1;
        me.expandedItem = i;
    } else {
        comp.collapsed = true;
    }
    But we can try to hack this I did a test...I added into my accordion panel a hidden item that is expanded. This way I made it possible to have all panels collapsed at first. Check it out:

    Code:
    new Ext.Panel({
    	width: 200,
    	height: 300,
    	renderTo: Ext.getBody(),
    	bodyStyle: 'border-top:none;', // << border hack
    	layout: {
    		type: 'accordion'
    	},
    	items: [{
    		xtype: 'panel', // << fake hidden panel
    		hidden: true,
    		collapsed: false
    	},{
    		title: 'Item 1',
    		html: 'Content 1'
    	},{
    		title: 'Item 2',
    		html: 'Content 2'
    	},{
    		title: 'Item 3',
    		html: 'Content 3'
    	}]
    });
    I attached the final result. There is some border issues, that you could solve with CSS rules.
    accordion_all_collapsed.gif

    Of course you could try to rewrite Accordion.js and make a custom layout. Would be more elegant, but give you more work.

    Cheers!

  4. #3
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    176
    Vote Rating
    2
    Answers
    4
    renganathan is on a distinguished road

      0  

    Default


    Hi ,

    Thanks for your solution . It was helped me to complete one module.

    your work was highly appreciated

    Thanks
    Thanks,

    RENGANATHAN M G

  5. #4
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    176
    Vote Rating
    2
    Answers
    4
    renganathan is on a distinguished road

      0  

    Default Collapse all the panels in the accordion by on click event

    Collapse all the panels in the accordion by on click event


    Hi ,


    Collapse all the panels in the accordion by default is working fine.

    can you help me how to collapse all the panels in the accordion by on click event?

    Thanks in Advance!
    Thanks,

    RENGANATHAN M G

  6. #5
    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 can exemplify the handler that takes the accordion panel and collapse all it's children. You can dive the docs on how to add the handler to a button and etc...

    Code:
    onButtonCollapseAllClick: function(btn) {
    	var panelAccordion = btn.up('#panel_accordion');
    	panelAccordion.items.each(function(item) {
    		item.collapse();
    	});
    }
    Cheers!

  7. #6
    Ext JS Premium Member
    Join Date
    Jan 2010
    Location
    Bavaria
    Posts
    29
    Vote Rating
    5
    Answers
    2
    _alex is on a distinguished road

      2  

    Default


    you could also try this:

    Code:
      
    [....]  
        layout: {        
            type: 'accordion',
            fill: false,
            titleCollapse: false,
            expandedItem: -1
        },
    [....]

  8. #7
    Sencha User
    Join Date
    May 2014
    Posts
    2
    Vote Rating
    0
    JuanAlbertoMtz is on a distinguished road

      0  

    Default


    Is there a way to collapse all panels after one has been expanded? Using the hidden panel works at the beginning but after I start expanding the other panels I can't have all the panels collapsed again.