View Full Version : border layout

25 Jun 2013, 11:16 AM
hello my task is following layout
i know that it needs border layout, i tray almost every combination but my goal is not reached,main problem is thirdPanel
please help me.. give me some advise

25 Jun 2013, 12:53 PM
make a an east and a center region. Then split the center into center and south. So that makes four panels. One east One center. In the Center, one center and one south.

25 Jun 2013, 10:20 PM
thank you very much i did , i don't know split's job

25 Jun 2013, 11:13 PM
Define the split property on the panels you want to split

split: true

25 Jun 2013, 11:43 PM
thnks i did't know , but i know now

26 Jun 2013, 9:40 PM
You can also use the regionWeights config of Border to dictate which region will take up what space:

Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: {
type: 'border',
regionWeights: {
west: 20,
north: 10,
south: -10,
east: -20
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
xtype: 'panel',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit',
split: true
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit'
renderTo: Ext.getBody()

26 Jun 2013, 10:23 PM
can you tall me how mark my question as ,,answered''