BorderLayout

BorderLayout позволяет прикреплять элементы к одной из четырех сторон окна, либо закрепить его в центре:

Ext.onReady(function(){
	Ext.create('Ext.Panel', {
            width: 500,
            height: 360,
			padding: 10,
            layout:'border',
            items: [{
                    xtype: 'panel',
                    title: 'Центральная панель',
                    html: 'Центральная панель',
                    region: 'center',
                    margin: '5 5 5 5'
                },{
                    xtype: 'panel',
                    title: 'Верхняя панель',
                    html: 'Верхняя панель',
                    region: 'north',
                    height: 80
                },{
                    xtype: 'panel',
                    title: 'Нижняя панель',
                    html: 'Нижняя панель',
                    region: 'south',
                    height: 80
                },{
                    xtype: 'panel',
                    title: 'Левая панель',
                    html: 'Левая панель',
                    region: 'west',
                    width: 100
                },{
                    xtype: 'panel',
                    title: 'Правая панель',
                    html: 'Правая панель',
                    region: 'east',
                    width: 120
                }] ,
            renderTo: Ext.getBody()
        });
 });

Значение layout:'border' устанавливает компоновку. Затем мы задаем панели, которые примыкают к определенным сторонам контейнера с помощью параметра region. Этот параметр может принимать следующие значения:

• center - элемент размещается по центру

• north - элемент прижимается к верхней границе контейнера ("к северу")

• south - элемент прижимается к нижней границе контейнера

• west - элемент прижимается к левой стороне контейнера

• east - элемент прижимается к правой стороне контейнера

В данном случае мы устанавливаем значения region для всех панелей, однако нам необязательно использовать панели для всех пяти сторон.

Подобная компоновка также интересна в плане дополнительных возможностей. Так, она позволяет использовать следующие параметры:

• collapsed: true - означает, что панель будет скрыта при запуске

• collapsible: true - позволяет раскрыть/скрыть панель по нажатию на заголовок панели

• titleCollapse: true - скрывает панель

• split: true - позволяет раздвигать панель

Используем новые возможности:

Ext.onReady(function(){
	Ext.create('Ext.Panel', {
            width: 500,
            height: 360,
			padding: 10,
            layout:'border',
            items: [{
                    xtype: 'panel',
                    title: 'Центральная панель',
                    html: 'Центральная панель',
                    region: 'center'
                },{
                    xtype: 'panel',
                    title: 'Верхняя панель',
                    html: 'Верхняя панель',
                    region: 'north',
                    height: 80,
					collapsible: true,
                    titleCollapse: true
                },{
                    xtype: 'panel',
                    title: 'Нижняя панель',
                    html: 'Нижняя панель',
                    region: 'south',
                    height: 80
                },{
                    xtype: 'panel',
                    title: 'Левая панель',
                    html: 'Левая панель',
                    region: 'west',
                    width: 100,
                    collapsible: true,
                    collapsed: true
                },{
                    xtype: 'panel',
                    title: 'Правая панель',
                    html: 'Правая панель',
                    region: 'east',
                    width: 120,
                    split: true
                }] ,
            renderTo: Ext.getBody()
        });
 });