Эта статья является продолжением учебника по библиотеке компонентов ExtJS, используемой для создания web-приложений с функциональным интерфейсом пользователя.

Теперь мы перейдем к рассмотрению одного из базовых типов визуальных компонентов библиотеки – панели. Панель – это контейнер визуальных элементов, который выполняет роль базового блока при построении пользовательских интерфейсов web-приложений. Панель может содержать верхний и нижний тулбар (панель инструментов) и раздельные секции для заголовка, тела и подвала. Этот компонент также поддерживает функции сворачивания содержимого и набор встроенных кнопок, позволяющих выполнять стандартные действия.

Откроем созданный в прошлом разделе файл helloworld.html в Firefox и вызовем по нажатию клавиши F12 отладчик Firebug. Перейдя на вкладку Console и, отобразив полностью редактор кода, введем новую команду:

test = new Ext.Panel({
title: "Панелька",
html: "список: <li>раз</li>" +
"<li>два</li><li>три</li>"
})

Для исполнения команды нажмем комбинацию Ctrl-Enter. В области выполненного кода отобразится зеленая строка, обозначающая объект JavaScript, который был получен в результате запуска команды:

Рассмотрим ее подробнее: первым делом мы создаем переменную test, которой присваиваем новый объект, возвращаемый конструктором класса Ext.Panel (ключевое слово языка JavaScript – new и название класса). В параметрах конструктора нового объекта задается составной объект (фигурные скобки), содержащий текстовые свойства title и html, соответственно представляющие собой заголовок панели и ее содержимое в формате HTML. В этом примере мы продемонстрируем возможности задания произвольной разметки текста, выведя на экран пример списка.

Выполним следующую команду, которая на основе параметров только что созданного объекта добавит в объектную модель документа (DOM) новые элементы, представляющие собой создаваемую панель. Такое действие в терминах библиотеки называется рендер компонента (а соответствующий метод также носит название render). Вызовем этот метод у созданного объекта test, ассоциированного с нашей панелью, и передадим ему в качестве параметра ссылку на DOM элемент body документа, возвращаемый методом Ext.getBody():

test.render(Ext.getBody())

В общем случае метод render должен получать в качестве параметра строковый идентификатор или ссылку на объект любого DOM-элемента, к которому будет добавлен HTML-код для его отображения (рендера). В данном случае в качестве такого родительского элемента мы используем все окно браузера (DOM-элемент body).

После выполнения последней команды на экране отобразится голубая панелька с заголовком Панелька и ранее заданным списком:

Далее попробуем упростить создание панели, заменив две последовательные команды одной и указав DOM-элемент, который будет являться родительским для компонента, напрямую в параметрах его конструктора в свойстве renderTo. Для проверки работы этого метода нажмем на клавишу F5 и после сброса документа helloworld.html в первоначальный вид выполним команду:

test = new Ext.Panel({
 title: "Панелька",
 renderTo: Ext.getBody(),
 html: "список: <li>раз</li>" +
       "<li>два</li><li>три</li>"
})

Согласитесь, гораздо удобнее. Задание DOM-элемента в конструкторе компонента рекомендуется всякий раз, когда нет необходимости откладывать его отображение в зависимости от каких-либо условий.

Давайте определимся, что объект, передаваемый конструктору класса каждого создаваемого компонента, будем в дальнейшем называть конфигурацией компонента. Свойства, которые допускается указывать в конфигурации описаны в разделе Config Options каждого компонента на страницах документации библиотеки ExtJS.

Что представляет из себя только что созданный объект test? Щелкнем по зеленой строке Object initialConifg=Object title=Панелька events=Object и переместимся на вкладку DOM этого элемента. Здесь представлены доступные переменные и свойства объекта, а также функции, которые доступны для вызова. Для примера перейдем к свойству initialConfig и увидим конфигурацию панели на момент создания. Это очень удобный способ отладки поведения компонентов, которым в дальнейшем мы часто будем пользоваться:

Перейдем на вкладку HTML и развернем дерево элементов, являющихся дочерними по отношению к тегу body (к которому мы привязали новый компонент). Это внутреннее представление созданной нами панели в формате HTML. Мы видим, что базовым элементом панели является контейнер div, имеющий автоматически созданный идентификатор ext-comp-1001 и CSS класс x-panel. В свою очередь он содержит два других div-а, представляющих собой соответственно заголовок панели и ее тело (и содержащие заданные при создании компонента параметры Панелька и список…). Таким образом, эти DOM-элементы с накладываемыми на них стилями CSS представляют собой визуальные компоненты библиотеки ExtJS:

Попробуем далее поэкспериментировать с компонентом и вызовем последовательно методы объекта test:

test.hide();

test.show();

test.collapse();

test.expand();

Первые два выполняют скрытие и повторное отображение визуального компонента (любого компонента, а не только типа Panel!), другие наоборот являются методами класса Panel и организуют сворачивание и восстановление тела панели, по возможности используя визуальные эффекты.

Снова не открою большой тайны, если напомню, что все доступные методы и свойства компонента описаны в документации библиотеки ExtJS. Давайте откроем страницу компонента Panel и поиграемся с некоторыми из них.

test.setWidth(300)

Устанавливает ширину визуального компонента (в нашем случае 300 пикселей):

Имейте ввиду, что по-умолчанию ширина каждого компонента без ее явного указания считается как auto, то есть равной ширине родительского DOM-элемента (в нашем случае панель была равна ширине окна браузера, так как тег body является базовым элементом).

Попробуем изменить содержимое тела панели:

test.body.dom.innerHTML = «Новости нашего сайта!»

Команда обращается к свойству body объекта test, содержащему ссылку на класс Element, который в свою очередь через свойство dom ссылается на DOM-элемент тела панели, и через свойство innerHTML которого, мы присваиваем новое содержимое. Для удобства понимания этой взаимосвязи можете перейти на вкладку DOM и проследовав по дереву body -> dom -> innerHTML визуально запомнить структуру.

Давайте попробуем выполнить следующее действие – полное удаление компонента из документа:

test.destroy()

Перейдем на вкладку HTML и убедимся, что имевшаяся ранее DOM-структура панели уничтожена, а элемент body больше не содержит дочерних объектов:

Перейти далее к разделу Кнопки…

Перейти к содержанию Учебника по ExtJS

This entry was posted on Вторник, Сентябрь 30th, 2008 at 11:15 and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.