ExtJS Window Items Встраивание в окно различных компонентов

В ExtJS наполнение окон различным содержимом производится с помощью компонентов items.

items - это массив, который задает набор компонентов, встроенных в окно.
Каждый компонент из этого набора в свою очередь может состоять из набора других компонентов: панелей, таблиц, форм, стандартных и нестандартных элементов.

Элементы массива представляют собой объекты. Они могут быть заданы в виде ссылки на ранее созданный компонент или в виде литеральной записи.
В последнем случае при инициализации контейнера ExtJS самостоятельно создаст необходимые компоненты. Такой способ инициализации называется ленивым (lazy).

Приведем пример кода компонента items, представляющего собой обычную панель, встраиваемую в качестве содержимого всплывающего окна.

Ext.require([
    'Ext.window.*',
    'Ext.tip.*'
]);

var win = Ext.create('widget.window',{
    title: 'Заголовок окна',
    width: 600,
    height: 350,
    /* Массив items, хранящий содержимое окна */
    items: [
        {
            type: 'panel',
            title: 'Заголовок панели 1',
            html: 'Это панель номер 1.'
        },
        {  
            xtype: 'panel',
            title: 'Заголовок панели 2',
            html: 'Это панель номер 2.'
        }
    ]
});

win.show();

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



xtype служит указанием на то, какой именно тип компонента необходимо создать. В данном случае значение xtype соответствует типу панели.

Приведем пример нескольких стандартных типов компонет из документации ExtJS.

xtype	Class
button	Ext.button.Button
buttongroup	Ext.container.ButtonGroup
colorpalette	Ext.picker.Color
component	Ext.Component
container	Ext.container.Container
datepicker	Ext.picker.Date
editor	Ext.Editor
grid	Ext.grid.Panel
panel	Ext.panel.Panel
progress	Ext.ProgressBar
slider	Ext.slider.Single
tabpanel	Ext.tab.Panel
treepanel	Ext.tree.Panel
window	Ext.window.Window

Компоненты в массив items могут предаваться с помощью переменных.

// Создание панели
var ex_panel = new Ext.Panel({
    id: 'win1',
    title: 'Встраиваемая панель',
    html: 'Данная панель была встроена в окно посредством подстановки в массив items переменной ex_panel.',
    height: 100,
    width: '100%'
});

// Встраивание панели в окно
var win2 = Ext.create('widget.window', {
    title: 'Всплывающее окно',
    height: 350,
    width:  350,
    autoScroll: true,
    items: [ex_panel]
});

win2.show();

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



Аналогичным способом в ExtJS можно передать ссылку сразу на весь массив встраиваемых компонентов.

// Массив компонентов
var ex_components = [
    {  
        title: 'Заголовок панели 1',
        html:'Текст панели 1.'
    },
    {  
        title: 'Заголовок панели 2',
        html:'Текст панели 2.'
    }
];

// Встраивание компонентов в окно
var win2 = Ext.create('widget.window', {
    title: 'Всплывающее окно',
    height: 350,
    width:  350,
    autoScroll: true,
    items: ex_components
});

win2.show();

После подстановки панелей ExtJS выведет на экран всплывающее окно.