Objects in title section of accordion container?

[kimonp]

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

[slemmon]

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()
});

[kimonp]

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?

Thanks!!!

[slemmon]

Are you using titleCollapse?
http://docs.sencha.com/extjs/4.2.1/#...-titleCollapse

[kimonp]

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?

[slemmon]

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.