View Full Version : Objects in title section of accordion container?

8 Jul 2013, 5:43 PM
Is it possible to put objects in the title bar of each section of an accordion container?

I'd like to for example have a select menu in each section of my accordion as per below:

foo: <menu>
grid foo row 1
grid foo row 2
bar: <menu>
grid bar row 1
grid bar row 2
grid bar row 3

9 Jul 2013, 9:27 PM
Something like this what you're looking for?

Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 300,
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: false,
animate: true,
activeOnTop: true
items: [{
title: 'Panel 1',
html: 'Panel content!',
collapseFirst: false,
tools: [{
xtype: 'button',
text: 'Menu 1'
}, {
xtype: 'button',
text: 'Menu 2'
title: 'Panel 2',
html: 'Panel content!'
title: 'Panel 3',
html: 'Panel content!'
renderTo: Ext.getBody()

10 Jul 2013, 8:09 AM
Yes, that's what I was looking for-- but there is still one issue. When I click on a menu in the title bar, it collapses or expands the title bar as well as selecting the menu. Is there a way to stop this mouse click if it is handled by a button in the tool bar?


10 Jul 2013, 3:35 PM
Are you using titleCollapse?

10 Jul 2013, 3:47 PM
Ok, yes I was-- so that will work, thanks.

I don't suppose there is a way to keep titleCollapse on, but yet have it respect when tools are clicked?

11 Jul 2013, 8:49 PM
Probably the best way will be to set a beforecollapse listener on the child panels in the layout and use the eventObject's getTarget() method to see if the title / header was clicked on and return true or if a tool / button was clicked on and if so return false.