I am using Extjs 5.0.0
I have an accordion with a number of panels. Here my requirement is to expand and collapse panel by clicking on the title.
On the first click it expanded, that's fine. while again clicking on the same title i want to collapse all the panels. Here its opening the very next panel.
I just tried by expanding a hidden panel. But here both hidden panel and the next panel to the clicked panel get expanded.
listeners:{
afterrender: function(panel){
panel.header.el.on('click', function() {
if (panel.collapsed) {
Ext.getCmp('hiddenpanel').collapse();
}
else {
Ext.getCmp('hiddenpanel').expand();
}
});
}
}
Is there any solution to solve this problem ?
Thanks
If you are okay with opening multiple accordion items at a time, enable mutli property and set all other panels except the hidden panel collapsed by default will resolve the issue.
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 300,
layout: {
type: 'accordion',
animate: true,
multi: true,
},
items: [{
hidden:true,
},{
title: 'Panel 1',
html: 'Panel content!',
collapsed: true
},{
title: 'Panel 2',
html: 'Panel content!',
collapsed: true
},{
title: 'Panel 3',
html: 'Panel content!',
collapsed: true
}],
renderTo: Ext.getBody()
});
Jsfiddle
Edit: For versions above Ext 5.
Ext.application({
launch: function() {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
autoScroll: true,
defaults: {
border: true,
autoHeight: true,
minHeight: 304,
collapsed: true,
titleCollapse: false
},
layout: {
type: 'accordion',
animate: true,
multi: true,
fill: false
},
items: [{
collapsed: false,
border: 0,
height: 0,
minHeight: 0
}, {
title: 'Panel 1'
}, {
title: 'Panel 2'
}, {
title: 'Panel 3'
}, {
title: 'Panel 4'
}, {
title: 'Panel 5'
}],
});
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With