Объекты ExtJs в админке. Часть 1

В прошлой статье мы рассмотрели как формируется интерфейс админки на ExtJs. Теперь давайте попробуем разобраться, что можно сделать интерфейсом, который нам нарисовал ExtJs.

В ExtJs за каждым элементом интерфейса (панель, окно, таблица, кнопка, элемент формы) стоит специальный объект, называемый компонентом. Он отвечает за управление элементом интерфейса — создание, отображение, скрытие, удаление. В админке MODX все элементы «являются» компонентами ExtJs, за исключением верхнего меню. Разницу можно увидеть, если заглянуть в исходный код страницы — у меню простая и привычная HTML структура (ul > li > a), а если глянем на элемент, созданный ExtJs, то увидим, что он обернут дополнительными тегами. Например, вот код кнопки тулбара дерева ресурсов

<span unselectable="on" class="x-btn x-btn-small x-btn-icon-small-left tree-new-static-resource x-btn-noicon" id="ext-comp-1062" style="">
    <em class="">
         <button type="button" id="ext-gen139" class=" x-btn-text" style=""> </button>
    </em>
</span>

Видно, что достучаться до этой кнопки через обычный javascript будет не просто, в отличие от того же главного меню. Но нас это волновать не должно. Ведь есть ExtJs и в нём предусмотрены все необходимые методы. Давайте попробуем познакомиться поближе с некоторыми.

Для примера откроем страницу любого ресурса и посмотрим на её исходный код.

У всех важных элементов есть id, по которому обычно можно понять, к какому классу ExtJs принадлежит данный элемент (panel, tabpanel,tree...). А как нам изменить HTML элемент DOM с помощью ExtJs? Как раз для этого есть метод Ext.getCmp(id), где id — это значение аттрибута id элемента DOM. С помощью этого метода мы получаем объект ExtJs, отвечающий за указанный элемент, который хранится в памяти.

switch ($modx->event->name) {
    case 'OnManagerPageBeforeRender':
        $modx->controller->addJavascript('Url_to_file/myfile.js');
    break;
}

Упражнение

Подключаем свой обработчик события «click», который при клике на ветку дерева будет выполнять определенный код. Подключение будет происходить, когда DOM уже построен. Для этого есть специальная функция Ext.onReady(), которая как раз и запускается, когда процесс построения DOM закончен — страница загружена и отрендерена. В jQuery эту роль выполняет $(document).ready().

Вот так будет выглядеть наш js файл.

Ext.onReady(function () {
    // Получили объект дерева ресурсов
    var tree = Ext.getCmp('modx-tree-resource');
    // Подключили свой обработчик события
    tree.on('click',function(node,e){alert(node.text);},tree);
});

А можем, например, скрыть его tree.hide();

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

// Получаем объект компонента Ext.Toolbar, указывая его id (подглядели в коде страницы)
var tbar = Ext.getCmp('modx-resource-tree-tbar');
// Добавили ему кнопку (не в HTML код, а объекту, хранящемуся в памяти)
tbar.addButton({text:'My button'});
// А теперь заставляем объект перерисовать панель, чтобы кнопка отобразилась на странице
tbar.doLayout();

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

В следующей статье рассмотрим другие методы работы с элементами DOM.