Collapsible panels - other panels not taking up the new free space

[RobWilson]

Hi,

I've got a viewport with a border layout, in each region I have collapsible panels, one of those panels also has another border layout with two collapsible panels within it.

When a panel is collapsed, the other panels don't seem to take up the remaining space, even though the panel uses 'fit' layout.

It appears that the samples don't suffer from this problem

http://docs.sencha.com/ext-js/4-1/#!...t/complex.html

But for the life of me I can't find the 'view source' link that used to exist in ExtJS 3 samples - any ideas where they are now?

Is there anything specific that I need to do to the panels in addition to setting the collapsible flag to make this work?

Thanks,
Rob.

[scottmartin]

I've got a viewport with a border layout, in each region I have collapsible panels

Do you by chance have collapse setup on center region? not allowed.
If this is not the case, we will need a small test case to review.

Scott.

[RobWilson]

This is what I'm aiming for

Screen Shot 2012-07-05 at 20.46.15.png
Basically my order and trade blotter are both in the centre panel of the main panel, are you saying that any child panels within the centre panel can't have collapsible either?

Code sample...

Ext.define('PeelHunt.view.ui.MainView', {
    extend: 'Ext.panel.Panel',


    height: 532,
    width: 705,
    layout: {
        type: 'border'
    },
    title: 'My Panel',


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    layout: {
                        type: 'border'
                    },
                    animCollapse: false,
                    region: 'center',
                    items: [
                        {
                            xtype: 'panel',
                            layout: {
                                type: 'fit'
                            },
                            collapsible: true,
                            title: 'Order Blotter',
                            collapseMode: 'header',
                            region: 'center'
                        },
                        {
                            xtype: 'panel',
                            height: 150,
                            layout: {
                                type: 'fit'
                            },
                            collapsible: true,
                            title: 'Trade Blotter',
                            titleCollapse: true,
                            collapseMode: 'header',
                            region: 'south'
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    width: 251,
                    collapseDirection: 'left',
                    collapsible: true,
                    title: 'OrderEntryPanel',
                    titleCollapse: true,
                    region: 'west',
                    items: [
                        {
                            xtype: 'panel',
                            collapsible: true,
                            title: 'Instrument Search',
                            titleCollapse: true
                        },
                        {
                            xtype: 'panel',
                            collapsed: false,
                            collapsible: true,
                            title: 'Order Details',
                            titleCollapse: true
                        },
                        {
                            xtype: 'panel',
                            collapsible: true,
                            title: 'Order Feedback',
                            titleCollapse: true
                        }
                    ]
                }
            ]
        });


        me.callParent(arguments);
    }
});

[scottmartin]

In the border layout, you need a static region (center). It cannot be collapsible.
You were expecting the south region to fill the gap?

The alternative is to use vbox layout for order/trade panes

Ext.define('PeelHunt.view.ui.MainView', {
    extend: 'Ext.panel.Panel',


    height: 532,
    width: 705,
    layout: {
        type: 'border'
    },
    title: 'My Panel',


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    animCollapse: false,
                    region: 'center',
                    items: [
                        {
                            xtype: 'panel',
                            layout: {
                                type: 'fit'
                            },
                            collapsible: true,
                            flex: 2,
                            title: 'Order Blotter',
                            collapseMode: 'header'
                        },
                        {
                            xtype: 'panel',
                            flex: 1,
                            layout: {
                                type: 'fit'
                            },
                            collapsible: true,
                            title: 'Trade Blotter',
                            titleCollapse: true,
                            collapseMode: 'header'
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    width: 251,
                    collapseDirection: 'left',
                    collapsible: true,
                    title: 'OrderEntryPanel',
                    titleCollapse: true,
                    region: 'west',
                    items: [
                        {
                            xtype: 'panel',
                            collapsible: true,
                            title: 'Instrument Search',
                            titleCollapse: true
                        },
                        {
                            xtype: 'panel',
                            collapsed: false,
                            collapsible: true,
                            title: 'Order Details',
                            titleCollapse: true
                        },
                        {
                            xtype: 'panel',
                            collapsible: true,
                            title: 'Order Feedback',
                            titleCollapse: true
                        }
                    ]
                }
            ]
        });


        me.callParent(arguments);
    }
});


Ext.create('PeelHunt.view.ui.MainView', {
    renderTo: Ext.getBody()
});

Scott.