ExtJS: east/west region to occupy available space when other regions are not present

1
votes

Iam using border layout for my application.I want to make east/west region to occupy the available space whenever other regions are hidden or not present. For example if east and center regions are there, if center region is made hidden, automatically east region should occupy the space available. Please suggest your ideas to achieve this. Thank You.

1
extjs

1 Answers

0
votes

I suggest to use cleverly the flex property.

Here is a Sencha Fiddle for you

Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
    title: 'South Region is resizable',
    region: 'south', // position for region
    xtype: 'panel',

    height: 100,
    split: true, // enable resizing
    margins: '0 5 5 5'
}, {
    // xtype: 'panel' implied by default
    title: 'West Region is collapsible',
    region: 'west',
    xtype: 'panel',
    layout: 'fit',
    flex:100,
    collapsible:true,
    id: 'west-region-container',
    layout: 'fit',
    html:'Content of the west panel'
}, {
    title: 'Center Region is collapsible',
    region: 'center', 
    xtype: 'panel',
    flex:100,
    layout: 'fit',
    collapsible:true,
    html:'Content of the center'
}],
renderTo: Ext.getBody()
});