PDA

View Full Version : Collapse all panels in the Accordion



Soumya27
5 Nov 2012, 8:29 AM
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.

39828

tvanzoelen
6 Nov 2012, 2:22 AM
What if you set the property collapsed: true in the config on all panels you add to the accordion?

Soumya27
6 Nov 2012, 2:47 AM
No it does not work. The first item of accordion layout is expanded bydefault

tvanzoelen
6 Nov 2012, 2:49 AM
Mayby then the hard way. Append a listener on render or show and collapse the whole bunch

tvanzoelen
6 Nov 2012, 2:54 AM
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
6 Nov 2012, 3:31 AM
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
10 Dec 2012, 1:33 AM
Undocumented hack.

Ext.widget('panel', {

defaults: {
collapsed: true
},

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


...


});