Results 1 to 3 of 3

Thread: Complex border layout with collapsible panels - header stretched

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    69
    Answers
    1

    Default Answered: Complex border layout with collapsible panels - header stretched

    Hi, I;m having a problem with this layout. I have created a test viewport to illustrate the behavior In my application I have separate classes for each view that actually contain grids, tree panels etc.

    Run the code and try to collapse left bottom panel. It's header will be stretched after collapse that will not actually work. Can someone tell me if I'm doing something wrong here, or is this layout too complicated?
    I have also attached a screenshot that shows the problem.
    Thanks!

    Code:
    Ext.define('MyApp.view.MyViewport', {    extend: 'Ext.container.Viewport',
    
    
        layout: {
            type: 'border'
        },
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'panel',
                        flex: 1,
                        region: 'west',
                        split: true,
                        width: 150,
                        layout: {
                            type: 'border'
                        },
                        collapsible: true,
                        hideCollapseTool: true,
                        title: 'My Panel',
                        items: [
                            {
                                xtype: 'treepanel',
                                region: 'north',
                                split: true,
                                height: 150,
                                collapseDirection: 'top',
                                collapsible: false,
                                title: 'My Tree Panel',
                                viewConfig: {
    
    
                                }
                            },
                            {
                                xtype: 'panel',
                                region: 'center',
                                collapseDirection: 'bottom',
                                collapsible: true,
                                title: 'My Panel'
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        flex: 3,
                        region: 'center',
                        split: true,
                        layout: {
                            type: 'border'
                        },
                        header: false,
                        title: 'My Panel',
                        items: [
                            {
                                xtype: 'tabpanel',
                                region: 'north',
                                split: true,
                                height: 150,
                                collapseDirection: 'top',
                                collapsible: true,
                                activeTab: 0,
                                items: [
                                    {
                                        xtype: 'panel',
                                        layout: {
                                            type: 'fit'
                                        },
                                        title: 'Tab 1',
                                        items: [
                                            {
                                                xtype: 'gridpanel',
                                                frameHeader: false,
                                                header: false,
                                                title: 'My Grid Panel',
                                                hideHeaders: false,
                                                columns: [
                                                    {
                                                        xtype: 'gridcolumn',
                                                        dataIndex: 'string',
                                                        text: 'String'
                                                    },
                                                    {
                                                        xtype: 'numbercolumn',
                                                        dataIndex: 'number',
                                                        text: 'Number'
                                                    }
                                                ],
                                                viewConfig: {
    
    
                                                }
                                            }
                                        ]
                                    },
                                    {
                                        xtype: 'panel',
                                        title: 'Tab 2'
                                    },
                                    {
                                        xtype: 'panel',
                                        title: 'Tab 3'
                                    }
                                ]
                            },
                            {
                                xtype: 'panel',
                                region: 'center',
                                split: true,
                                title: 'My Panel'
                            }
                        ]
                    }
                ]
            });
    
    
            me.callParent(arguments);
        }
    
    
    });
    Attached Images Attached Images

  2. The center region is not meant to be collapsible, just all other regions surrounding it.

    Scott.

  3. #2
    Sencha User
    Join Date
    Aug 2011
    Posts
    69
    Answers
    1

    Default

    SOLVED: ok, my mistake I guess. I have realized, that if I set top panel to Region: Center (to fill the screen) and bottom panel to Region : South it will work correctly (In the posted code, top panel is "north" and bottom panel is "center").

  4. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    The center region is not meant to be collapsible, just all other regions surrounding it.

    Scott.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •