ExtJS. Компоненты. Введение

Введение

Базовым классом для любых компонент в ExtJS является Ext.Component. Этот класс позволяет экземплярам участвовать в автоматизированном жизненном цикле

Создание (instantiation)

Отрисовка (rendering)

Установка размеров (sizing )

Позиционирование (positioning)

Разрушение (destruction)

ExtJS обладает широким набором уже созданных компонентов, а также обладает возможностью их создавать — на основе уже готовых либо «с нуля».

Размещение компонент в контейнерах

Компоненты не «болтаются» в безвоздушном пространстве. Они как правило помещаются внутрь контейнеров — ими могут служить панели, так называемые viewport и др. виды контейнеров. Родительские же компоненты, в свою очередь, управляют жизненным циклом дочерних компонент. Ниже рисунок с официального сайта ExtJS, из статьи про компоненты.

6

 

Обратите внимание — все компоненты помещены в Ext.container.Viewport. Другие компоненты помещены в другие панели. На той же странице приводится следующий код создания 2 дочерних панелей, помещенных во Viewport

xtype или короткое название компонента

В ExtJS у каждого компонента есть короткое имя, так называемый «xtype». В качестве примера — вот список некоторых xtype

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

Используя xtype — перепишем наш пример выше таким образом, чтобы одну панель создавать по ссылке, а вторую непосредственно через xtype

Рендеринг компонентов — прямой и отложенный(lazy)

Рендеринг — это отрисовка компонента внутри того или иного html элемента на веб-странице. Прямой рендеринг — это отрисовка сразу же после создания компонента. Отложенный — это отрисовка компонента в тот момент, когда нам это нужно. Рассмотрим все это на примерах.

Пример прямого рендеринга

Пример отложенного (lazy) рендеринга

Рендеринг в произвольный Html элемент

Если мы знаем id какого-либо html элемента, то можно отрендерить наш компонент прямо в этот html элемент таким образом.

При директ рендеринге

При отложенном (lazy) рендеринге

Добавление / вставка / удаление компонентов

Добавление в конец

Добавление в место по индексу — в принципе это тоже самое, что и add, но мы можем указать индекс для вставки

Удаление компонентов

У метода remove есть второй необязательный параметр типа boolean, если объявить его как false, то компонент не уничтожается, а просто скрывается. Чтобы добавить его снова, можно использовать метод add.

Hide() Show() methods

В данном примере мы просто создаем панель, прячем её и показываем снова методами hide(), show()