1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    13
    Vote Rating
    0
    Soumya27 is on a distinguished road

      0  

    Default Unanswered: Collapse all panels in the Accordion

    Unanswered: Collapse all panels in the Accordion


    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

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Answers
    85
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    13
    Vote Rating
    0
    Soumya27 is on a distinguished road

      0  

    Default


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

  4. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Answers
    85
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


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

  5. #5
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Answers
    85
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    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
    Code:
    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;
            }
        },

  6. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Answers
    85
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    The override

    Code:
    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;
            }
            
            
        }
    
    });

  7. #7
    Sencha User
    Join Date
    Oct 2011
    Location
    Sweden
    Posts
    36
    Answers
    10
    Vote Rating
    0
    JambaFun is on a distinguished road

      0  

    Default


    Undocumented hack.
    Code:
    Ext.widget('panel', {
    
        defaults: {
            collapsed: true
        },
    
        layout: {
            type: 'accordion',
            expandedItem: false
        },
    
    
        ...
    
    
    });

Thread Participants: 2