4

I am trying to use the Border layout in Extjs 4.2.1, when I specify North and South containers they expand and fill the entire horizontal space in the viewport, I want them to allow the West panel to be full height instead.

Here is some simple ASCII art version of what I am trying to achieve.

-----------------
|W|____North____|
|E|    Center   |
|S|_____________|
|T|    South    |
-----------------

1 Answers1

7

You can also use the weight property to give precedence to a region—for example, giving precedence to the West region over the North region. All these changes mean that you should not often need nesting with border layout, speeding up rendering of components that use that layout.

Ext.define('MyApp.view.MainViewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    region: 'west',
                    weight: -1,
                    width: 150,
                    title: 'My Panel'
                },
                {
                    xtype: 'panel',
                    region: 'north',
                    weight: -2,
                    height: 150,
                    title: 'My Panel'
                },
                {
                    xtype: 'panel',
                    region: 'south',
                    weight: -2,
                    height: 150,
                    title: 'My Panel'
                },
                {
                    xtype: 'panel',
                    region: 'east',
                    width: 150,
                    title: 'My Panel'
                },
                {
                    xtype: 'panel',
                    region: 'center',
                    title: 'My Panel'
                }
            ]
        });

        me.callParent(arguments);
    }

});