i have 2 panels inside a border-layout. The second one is collapsible with configs 'collapsed' and 'titleCollapse' set. When i click on the title it just shows the panel "temporary" which means that it doesn't stick but collapses automatically after i click anywhere else inside my window. It kind of floats in...

Working example: /

Ext.onReady(function() {
    Ext.create('Ext.window.Window', {
        width: 500,
        height: 300,

        layout: 'border',

        items: [{
                xtype: 'panel',
                title: 'panel1',
                region: 'center',
                flex: 1
            },{
                xtype: 'panel',
                title: 'panel2',
                region: 'south',
                flex: 1,

                collapsible: true,
                collapsed: true,
                animCollapse: false,
                collapseDirection: Ext.Component.DIRECTION_BOTTOM,
                titleCollapse: true
        }]
    }).show();
});

I guess this is a feature of the border-layout because if i put the 2 panels into a box-layout the collapsed panel permanently expands after a click on the title-bar.

I'm aware that the panel would stay expanded if i click on the "double-arrow" or if i click the title a second time after it has been "floated in" but i just don't want this floating-behaviour at all because i experienced it as pretty buggy so far.

I would really appreciate if anyone could tell me how to turn that feature of the border-layout off.

Thanks

i have 2 panels inside a border-layout. The second one is collapsible with configs 'collapsed' and 'titleCollapse' set. When i click on the title it just shows the panel "temporary" which means that it doesn't stick but collapses automatically after i click anywhere else inside my window. It kind of floats in...

Working example: http://jsfiddle/suamikim/LNfm8/

Ext.onReady(function() {
    Ext.create('Ext.window.Window', {
        width: 500,
        height: 300,

        layout: 'border',

        items: [{
                xtype: 'panel',
                title: 'panel1',
                region: 'center',
                flex: 1
            },{
                xtype: 'panel',
                title: 'panel2',
                region: 'south',
                flex: 1,

                collapsible: true,
                collapsed: true,
                animCollapse: false,
                collapseDirection: Ext.Component.DIRECTION_BOTTOM,
                titleCollapse: true
        }]
    }).show();
});

I guess this is a feature of the border-layout because if i put the 2 panels into a box-layout the collapsed panel permanently expands after a click on the title-bar.

I'm aware that the panel would stay expanded if i click on the "double-arrow" or if i click the title a second time after it has been "floated in" but i just don't want this floating-behaviour at all because i experienced it as pretty buggy so far.

I would really appreciate if anyone could tell me how to turn that feature of the border-layout off.

Thanks

• javascript
• extjs
• extjs4

1 Answer 1

Add after titleCollapse property

floatable: false

Look at the fiddle