What do I need to do to get the border layout so that the height of the container in West increases in the viewport?

Question

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

Here are some simple versions of ASCII that I am trying to achieve.

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

Answer 1

You can also use the weight property to give priority to the region, for example, giving preference to the Western region over the Northern region. All these changes mean that you often don’t need nesting with the border layout, accelerating the rendering of components that use this 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); } });