Collapse/Expand problem on button in header problem

[lotjer]

I'm having a problem with expanding/collapsing the panel when it shouldn't be doing that.

I have the following code that has 2 buttons in the header of a panel that can be collpased by title.
Whenever I click on the buttons the panel expands/collaps & performs the click events.
I want to perform only the events of the buttons and not the collapsing & expanding of the panel.

<ext:Panel ID="Panel1" runat="server" Layout="AccordionLayout">
    <LayoutConfig>
        <ext:AccordionLayoutConfig Multi="true" />
    </LayoutConfig>         
             
    <Items>
        <ext:Panel ID="PanelPersonExpandZoeken" runat="server" Border="false" Collapsed="false" Height="155" Icon="Magnifier" HideCollapseTool="true" BodyPadding="5">
            <Content>
                <Persoon:Zoeken runat="server" ID="Zoeken" />
            </Content>
        </ext:Panel>

        <ext:Panel ID="PanelPersonExpandList" runat="server" Border="false" Collapsed="true" AutoScroll="true" Height="370" Icon="Building" HideCollapseTool="true" BodyPadding="5">
            <Content>
                <Persoon:List runat="server" ID="List" />
            </Content>

            <HeaderConfig>
                <Items>
                    <ext:Button ID="PersoonToevoegen" runat="server" Icon="Add">
                        <Listeners>
                            <Click Handler="#{PanelPersonExpandZoeken}.collapse();#{PanelPersonExpandDetail}.expand();App.direct.Persoon.ReloadDetailPanel(-1);" />
                        </Listeners>
                    </ext:Button>

                    <ext:Button ID="BtnFunctieMenu" runat="server" Text="..." MenuArrow="false">
                        <Menu>
                            <ext:Menu ID="FunctieMenu" runat="server">
                                <Items>
                                    <ext:MenuItem ID="ExportExcel" runat="server" Handler="App.direct.Persoon.ExportData('excel', { isUpload : true }); "/>
                                    <ext:MenuItem ID="ExportPdf" runat="server" Handler="App.direct.Persoon.ExportData('pdf', { isUpload : true });" />
                                </Items>
                            </ext:Menu>
                        </Menu>
                    </ext:Button>
                </Items>
            </HeaderConfig>
        </ext:Panel>

        <ext:Panel ID="PanelPersonExpandDetail" runat="server" Height="1000" Border="false" Collapsed="false" Icon="EmoticonSmile" HideCollapseTool="true" AutoScroll="true">
            <Loader ID="Loader1" runat="server" AutoLoad="false" Scripts="true" Mode="Frame">
                <LoadMask ShowMask="true" />
            </Loader>
        </ext:Panel>
    </Items>
</ext:Panel>

Is there a property I can set to prevent this?

[blueworld]

There is a property called "TitleCollapse", set it to false.

If this does not work, move the buttons to a topbar

[lotjer]

I have tried to set the TitleCollapse to false but it didn't didn't work.

I moved the buttons to a topbar and it solved the problem as it didn't collapse & expand the panel anymore.
But the problem is now the topbar is an extra bar and I don't want that and it also doesn't show when the panel is collapsed.

It should remain in the header so it still shows when collapsed and it's not an extra bar.

Sidenote:
I removed the propery 'HideCollapseTool="true"' so the expand/collapse button shows but I can still expand/collapse when clicking on the header and it shouldn't do that. I want only collapse/expand on that button. Can somebody help me with that also. Setting the CollapseMode to Mini didn't help.