View Full Version : Accordion layout - make one item not collapsible

23 Oct 2013, 8:34 AM

how can I make one menu item in a panel with accordion layout (the last item in our case) not to expand on click?

I tried collapsible: false for the last panel in the accordion panel, but it expands on click anyway.

Thank you very much!

23 Oct 2013, 10:05 AM

Can u re-phrase the requirement.

Is it the case as below ?

U have an accordion layout to a valid container.The last item of that container(with accordion layout) is a panel. Inside that u have a menu item. Now u want to this last item not to show up when u r clicking on the header of the accordion .

Or else do mention clearly once again.


23 Oct 2013, 11:31 AM
Thank you for your reply.

Yes, I want to have an item with expandable: false in the accordion and behave like this code which I fiddled as workaround:

Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 200,
layout: {
type: 'accordion',
animate: true
items: [{
title: 'Panel 1',
html: 'Panel content!'
title: 'Panel 2',
html: 'Panel content!'
title: 'I want to be like a static button',
isCollapsingOrExpanding: true, // HACK for non-existing expandable: false
//expandable: false,
//tools: null // we don't want + button here for non-expandable item
listeners: {
click : {
element : 'el',
fn : function(){console.log('last button-like item clicked, workaround for beforeexpand here')},
scope : this
renderTo: Ext.getBody()

I took a look at the panel.expand() source, it doesn't check something like isExpandable before processing expand anim., but you can simulate the desired behaviour with isCollapsingOrExpanding: false (the problem with this hack is, that no events (beforeexpand...) are fired then, but wecan go on the ...el.click event)

Maybe the simple workaround for our case is to Ext override the panel.expand() method and add a expandable check like or just use it as described above

if (me.unexpandable) {
return me;