1. #1
    Sencha User
    Join Date
    Sep 2008
    Posts
    118
    Vote Rating
    1
    RobWilson is on a distinguished road

      0  

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

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


    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.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Sep 2008
    Posts
    118
    Vote Rating
    1
    RobWilson is on a distinguished road

      0  

    Default


    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...

    Code:
    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);
        }
    });

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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

    Code:
    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.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi