Results 1 to 2 of 2

Thread: Maintain percentage based border layout after resize using splitter

  1. #1

    Default Maintain percentage based border layout after resize using splitter

    The layout listed below assigns a percentage width/height of the overall container to the west and south components.
    This works well when resizing the browser, in that those percentages are maintained.

    If however, I use the splitter to resize the west or south panels, those panels suddenly become fixed to that exact size. Rezising the browser has no affect on those panels.

    Is there any current api setting I can use to force it to maintain the percentage approach - in that after resize ext would recalculate what percentage of the screen they now occupy and set the width/height as a new percentage.

    Code:
    Ext.onReady(function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [
                {
                    region: 'north',
                    margins: 5,
                    height: 50,
                    xtype: 'container',
                    html: 'North'
    },
                {
                    title: 'West',
                    region: 'west',
                    margins: '0 5 0 5',
                    width:'50%',
                    collapsible: true,
                    split: true,
                    titleCollapse: true
    },
                {
                    title: 'Center',
                    region: 'center'
    },
                {
                    title: 'East',
                    region: 'east',
                    margins: '0 5 0 5',
                    width: 100,
                    collapsible: true,
                    collapsed: true
    },
                {
                    title: 'South',
                    region: 'south',
                    margins: '0 5 5 5',
                    height: '40%',
                    split: true,
                    html:'testing 123'
    }
            ]
        });
    });

  2. #2

    Default

    Managed to find a solution using "hbox" and "vbox" layout, as both support the "splitter" component, it maintains flex even after sizing.

    Here's what I was trying to achieve, incase it benefits any one else later...

    Code:
    Ext.define('spiral.centerpanel', {
        extend: 'Ext.Container',
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        alias: 'widget.centerpanel',
        items: [{
                title: 'left',
                flex: .5,
                resizable: false,
                style: {
                    borderRight: '2px solid #157FCC'
                },
                collapsible: true,
                collapseDirection: 'left',
                xtype: 'panel',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                html: 'testing left'
            },
            {
                xtype: 'splitter'
            },
            {
                title: 'center',
                flex: 1,
                autoScroll: true,
                html: "testing center"
            },
            {
                xtype: 'splitter'
            },
            {
                title: 'right',
                flex: .5,
                autoScroll: true,
                resizable: false,
                style: {
                    borderLeft: '2px solid #157FCC'
                },
                collapsible: true,
                collapseDirection: 'right',
                xtype: 'panel',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                html: 'testing right'
            }
        ]
    });
    Ext.onReady(function() {
        new Ext.container.Viewport( {
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    style: {
                        borderTop: '2px solid #157FCC',
                        borderBottom: '2px solid #157FCC'
                    },
                    html:'top',
                    height: 60
                },
                {
                    xtype: 'centerpanel',
                    flex: 1
                },{
                    style: {
                        borderTop: '2px solid #157FCC',
                        borderBottom: '2px solid #157FCC'
                    },
                    html:'bottom',
                    height: 30
                }]
        });
    });

Similar Threads

  1. [OPEN] Adding VBox with Splitter inside Border layout breaks layout
    By StuartAshworth in forum Ext JS 6.x Bugs
    Replies: 3
    Last Post: 7 Jan 2016, 5:36 AM
  2. Ext js 4.0 border layout Splitter Issue.
    By abhinavchugh in forum Ext: Q&A
    Replies: 3
    Last Post: 23 May 2012, 12:12 PM
  3. [CLOSED] Bug with splitter used in a border layout
    By Anticom in forum Ext:Bugs
    Replies: 1
    Last Post: 16 Feb 2012, 11:58 AM
  4. Replies: 3
    Last Post: 22 Jun 2009, 6:03 AM

Tags for this Thread

Posting Permissions

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