Collapse all panels in the Accordion

[Soumya27]

I want to collapse all the panels in the accordion by default. For me first panel always active.
Guys please suggest how to fix the problem? PFB the screenshot for better understanding.

Screen shot 2012-11-05 at 9.57.48 PM.png

[tvanzoelen]

What if you set the property collapsed: true in the config on all panels you add to the accordion?

[Soumya27]

No it does not work. The first item of accordion layout is expanded bydefault

[tvanzoelen]

Mayby then the hard way. Append a listener on render or show and collapse the whole bunch

[tvanzoelen]

What if you set the fill property to false? You could check this function in Accordian.js to see what is happing why the first panels expands. And maybe override it.

Would be interessting also to see what collapseFirst is doing.


The expanding thing happens here I think

beforeRenderItems: function (items) {
        var me = this,
            ln = items.length,
            i = 0,
            owner = me.owner,
            collapseFirst = me.collapseFirst,
            hasCollapseFirst = Ext.isDefined(collapseFirst),
            expandedItem,
            comp;

        for (; i < ln; i++) {
            comp = items[i];
            if (!comp.rendered) {
                // Set up initial properties for Panels in an accordion.
                if (hasCollapseFirst) {
                    comp.collapseFirst = collapseFirst;
                }
                if (me.hideCollapseTool) {
                    comp.hideCollapseTool = me.hideCollapseTool;
                    comp.titleCollapse = true;
                }
                else if (me.titleCollapse) {
                    comp.titleCollapse = me.titleCollapse;
                }

                delete comp.hideHeader;
                delete comp.width;
                comp.collapsible = true;
                comp.title = comp.title || ' ';
                comp.addBodyCls(Ext.baseCSSPrefix + 'accordion-body');

                // If only one child Panel is allowed to be expanded
                // then collapse all except the first one found with collapsed:false
                // If we have hasExpanded set, we've already done this
                if (!me.multi && !me.hasExpanded) {
                    // 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) {
                        me.expandedItem = i;
                    } else {
                        comp.collapsed = true;
                    }

                    // If only one child Panel may be expanded, then intercept expand/show requests.
                    owner.mon(comp, {
                        show: me.onComponentShow,
                        beforeexpand: me.onComponentExpand,
                        scope: me
                    });
                }

                // If we must fill available space, a collapse must be listened for and a sibling must
                // be expanded.
                if (me.fill) {
                    owner.mon(comp, {
                        beforecollapse: me.onComponentCollapse,
                        scope: me
                    });
                }
            }
        }

        // If no collapsed:false Panels found, make the first one expanded.
        expandedItem = me.expandedItem;
        if (!me.hasExpanded) {
            if (expandedItem === undefined) {
                if (ln) {
                    items[0].collapsed = false;
                }
            } else if (me.activeOnTop) {
                expandedItem = items[expandedItem];
                expandedItem.collapsed = false;
                me.configureItem(expandedItem);
                owner.insert(0, expandedItem);
            }
            me.hasExpanded = true;
        }
    },

[tvanzoelen]

The override

Ext.define('Ext.layout.container.Accordion', {

    override: 'Ext.layout.container.Accordion',    

    beforeRenderItems: function(items) {
        var me = this,
            ln = items.length,
            i = 0,
            owner = me.owner,
            collapseFirst = me.collapseFirst,
            hasCollapseFirst = Ext.isDefined(collapseFirst),
            expandedItem,
            comp;

        for (; i < ln; i++) {
            comp = items[i];
            if (!comp.rendered) {
                // Set up initial properties for Panels in an accordion.
                if (hasCollapseFirst) {
                    comp.collapseFirst = collapseFirst;
                }
                if (me.hideCollapseTool) {
                    comp.hideCollapseTool = me.hideCollapseTool;
                    comp.titleCollapse = true;
                }
                else if (me.titleCollapse) {
                    comp.titleCollapse = me.titleCollapse;
                }

                delete comp.hideHeader;
                delete comp.width;
                comp.collapsible = true;
                comp.title = comp.title || '&#160;';
                comp.addBodyCls(Ext.baseCSSPrefix + 'accordion-body');

                // If only one child Panel is allowed to be expanded
                // then collapse all except the first one found with collapsed:false
                // If we have hasExpanded set, we've already done this
                if (!me.multi && !me.hasExpanded) {
                    // 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) {
                        me.expandedItem = i;
                    } else {
                        comp.collapsed = true;
                    }

                    // If only one child Panel may be expanded, then intercept expand/show requests.
                    owner.mon(comp, {
                        show: me.onComponentShow,
                        beforeexpand: me.onComponentExpand,
                        scope: me
                    });
                }

                // If we must fill available space, a collapse must be listened for and a sibling must
                // be expanded.
                if (me.fill) {
                    owner.mon(comp, {
                        beforecollapse: me.onComponentCollapse,
                        scope: me
                    });
                }
            }
        }

        // If no collapsed:false Panels found, make the first one expanded.
        expandedItem = me.expandedItem;
        
        if (!me.hasExpanded) {
            if (expandedItem === undefined) {                
                    items[0].collapsed = true;
                
            } else if (me.activeOnTop) {
                expandedItem = items[expandedItem];
                expandedItem.collapsed = false;
                me.configureItem(expandedItem);
                owner.insert(0, expandedItem);
            }
            me.hasExpanded = true;
        }
        
        
    }

});

[JambaFun]

Undocumented hack.

Ext.widget('panel', {

    defaults: {
        collapsed: true
    },

    layout: {
        type: 'accordion',
        expandedItem: false
    },


    ...


});