.. / 5. ExtJS лэйоуты (Ext.layout.container)

  1. ExtJS-4

1. Вводная

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

У любого контейнера, в том числе и окна (класс Ext.Window наследует свойства Ext.Container) может быть задано свойство layout, которое определяет как располагаются компоненты внутри родительского контейнера.

Наиболее распространенный тип макета страницы - трехколонник с подвалом (footer) и шапкой (header). Такой тип макета в ExtJS называется «border».

  layout: 'border', // тип лэйоута - трехколонник с подвалом и шапкой

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

<script>
function show() {
        var win;
        if (!win) {
            win = Ext.create('widget.window', {
                title: 'Лэйоуты. Пример ',
                height: 500,
                width:  500,
                layout: 'border', // тип лэйоута - трехколонник с подвалом и шапкой
                items: [{
                        region: 'north', // название области
                        xtype: 'panel',  // тип панели
                        html: 'North',   // HTML-код содержимого панели
                        height:100       // высота в пикселях
                        },{
                        region: 'west',
                        xtype: 'panel',
                        split: true,
                        width: 100,
                        html: 'West'
                    },{
                        region: 'center',
                        xtype: 'panel',
                        html: 'Center'
                    },{
                        region: 'east',
                        xtype: 'panel',
                        split: true,
                        width: 100,
                        html: 'East'
                    },{
                        region: 'south',
                        xtype: 'panel',
                        html: 'South',
                        height:100
                    }]
            });
         } win.show()
}
</script>

2. Дополнительные свойства панелей

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

items: [{
        region: 'west',
        xtype: 'panel',
        width: 100,
        collapsible: true,      // указываем что область может быть схлопнута
        split:true,             // установка возможности изменения размеров области.
        title: 'WEST',          // заголовок панели
        html: 'West',           // HTML-код содержимого панели
        minSize:50,             // минимальный размер
        maxSize:50              // максимальный размер

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

3. Вложенные панели

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

items: [{
        region: 'west',
        xtype: 'panel',
        width: 100,
        title: 'WEST',          // заголовок панели
        html: 'West',           // HTML-код содержимого панели

        },{
        region: 'center',
        xtype: 'panel',
        title: 'CENTER',
        layout: 'border', // тип лэйоута - трехколонник с подвалом и шапкой
        items: [{
                    xtype: 'panel',
                    region: 'north',
                    title: 'CENTER NORTH',
                    html: 'Center north',
                    height:100
                },{
                    xtype: 'panel',
                    region: 'center',
                    title: 'CENTER CENTER',
                    html: 'Center center'
                 },{
                    xtype: 'panel',
                    region: 'south',
                    title: 'SOUTH NORTH',
                    html: 'Center SOUTH',
                    height:100
                 }]
      }];

4. Не только трехколонник

В предыдущих примерах я пользовался основным типом макета (layout) - «border». Но в ExtJS их предусмотрено около десятка, включая любимый в народе «аккордеон», таблички, лэйоуты с абсолютным размещением панелей и т.д. Подробнее см. в документации
Ниже скопирован пример «аккордеона» из документации:

layout: 'accordion',
items:[{
                    xtype: 'panel',
                    title: '1',
                    html: 'Давайте, хотя раз поговорим об искусстве серьезно…',
                },{
                    xtype: 'panel',
                    title: '2',
                    html: 'Автор предлагает вам, шутки ради забавные разговоры…'
                 },{
                    xtype: '3',
                    title: 'SOUTH NORTH',
                    html: 'Я думаю, Дарья, что ты несправедлива к современному искусству…'
                 }];

4. Далее

  1. Инструментальные панели. Часть 1. Кнопки
  2. Инструментальные панели. Часть 2. Меню
  3. Панель с закладками
  1. 2011-11-12
  2. ExtJS-4
  1. docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Absolute - примеры на docs.sencha.com
  2. www.quizzpot.com/2009/07/what-is-a-panel-whats-the-functionality-how-do-you-create-one/ - What is a panel? What’s the functionality? How do you create one? (www.quizzpot.com)
  3. docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Absolute - docs.sencha.com — документация
Go Index Test