ExtJS Layout Размещение компонентов внутри окна

В ExtJS каждое окно Ext.Window может содержать несколько панелей Ext.Panel, каждая из которых может в свою очередь содержать другие панели.
Для красивого размещения каждого компонента внутри окна используется свойство layout, которое определяет как располагаются компоненты внутри родительского контейнера.

Наиболее распространенный тип макета страницы - трехколоночная структура с шапкой и подвалом, называемая в ExtJS называется "border".

Для указания взаимного размещения блоков внутри контейнера 'border' разработчкики ExtJS ввели ориентацию по сторонам света (north-east-south-west).
Областям north (верх) и south(низ) может быть задана высота.
Областям west (лево) и east(право) - ширина.
Центральная область называется center.

Ниже приведен пример разбиения окна на панели.

var win = Ext.create('widget.window', {
    title: 'Пример размещения компонентов внутри окна',
    height: 500,
    width:  500,
    layout: 'border', // тип размещения компонентов border - трехколоночная структура с шапкой иподвалом
    items: [
        {
            region: 'north', // название области
            xtype: 'panel', // тип панели
            height: 100, // высота панели в пикселях,
            html: 'Верх' // HTML-код содержимого панели
        },
        {
            region: 'west',
            xtype: 'panel',
            split: true,
            width: 100,
            html: 'Лево'
        },
        {
            region: 'center',
            xtype: 'panel',
            html: 'Центр'
        },
        {
            region: 'east',
            xtype: 'panel',
            split: true,
            width: 100,
            html: 'Право'
        },
        {
            region: 'south',
            xtype: 'panel',
            height: 100,
            html: 'Низ'
        }
    ]
});

win.show();

В результате ExtJS выведет на экран всплывающее окно Window с пятью панелями, размещенными внутри ячеек каркаса layout: 'border'.



Панели в окне могут имет заголовки, их размеры можно менять перетаскиванием мышкой или схлопывать.
Пример кода с дополнительными параметрами приведен ниже.

var win = Ext.create('widget.window', {
    title: 'Пример размещения компонентов внутри окна',
    height: 500,
    width:  500,
    layout: 'border', // тип размещения компонентов border - трехколоночная структура с шапкой иподвалом
    items: [
        {
            region: 'west',
            xtype: 'panel',
            width: 100,
            minSize: 50,// минимальный размер панели
            maxSize: 50, // максимальный размер панели
            collapsible: true, // указываем что область может быть схлопнута
            split: true, // установка возможности изменения размеров области
            title: 'WEST', // заголовок панели
            html: 'Лево' // HTML-код содержимого панели


        },
        {
            region: 'center',
            xtype: 'panel',
            title: 'CENTER',
            html: 'Центр'
        },
        {
            region: 'east',
            xtype: 'panel',
            width: 100,
            collapsible: true, // указываем что область может быть схлопнута
            collapseMode: 'mini', // при схлопывании панель прячется до минимума
            split: true, // установка возможности изменения размеров области
            html: 'Право'
        }
    ]
});

win.show();

В результате выполнения данного кода ExtJS выведет на экран всплывающее окно Window с тремя встроенными панелями.



Каждая панель в свою очередь может содержать в себе другие панели.


var win = Ext.create('widget.window', {
    title: 'Пример размещения компонентов внутри окна',
    height: 500,
    width:  500,
    layout: 'border', // тип размещения компонентов border - трехколоночная структура с шапкой иподвалом
    items: [
        {
            region: 'west',
            xtype: 'panel',
            width: 100,
            title: 'Левая панель',// заголовок панели
            html: 'Это левая панель.'// HTML-код содержимого панели

        },
        {
            region: 'center',
            xtype: 'panel',
            title: 'Центральная родительская панель',
            layout: 'border', // тип размещения компонентов border - трехколоночная структура с шапкой иподвалом
            items: [
                {
                    xtype: 'panel',
                    region: 'north',
                    height: 100,
                    title: 'Дочерняя верхняя панель',
                    html: 'Это дочерняя верхняя панель внутри родительской центральной панели.'
                },{
                    xtype: 'panel',
                    region: 'center',
                    title: 'Дочерняя центральная панель',
                    html: 'Это дочерняя центральная панель внутри родительской центральной панели.'
                 },{
                    xtype: 'panel',
                    region: 'south',
                    height: 100,
                    title: 'Дочерняя  нижняя панель',
                    html: 'Это дочерняя нижняя панель внутри родительской центральной панели.'

                 }
            ]
      }
    ]
});

win.show();

В результате выполнения данного кода ExtJS выведет на экран всплывающее окно Window с двумя встроенными панелями. При этом правая колонка будет содеражать в себе три дочерних панели.



В ExtJS предусмотрено свыше десятка видов каркасов layot для расположения элеметов, включая аккордеон, таблицы и каркасы с абсолютным позиционированием элементов.

Ниже приведен пример каркаса-аккордеона.

var win = Ext.create('widget.window', {
    title: 'Пример размещения компонентов внутри окна',
    height: 250,
    width:  250,
    layout: 'accordion',
    items:[
        {
            xtype: 'panel',
            title: 'Панель 1',
            html: 'Один',
        },
        {
            xtype: 'panel',
            title: 'Панель 2',
            html: 'Два'
        },
        {
            xtype: 'panel',
            title: 'Панель 3',
            html: 'Три'
        }
    ]
});

win.show();

В результате ExtJS выведет на экран окно с размещением панель внутри каркаса аккордеон.