Ваш первый Ext JS Script

MODX идёт в комплекте с Ext JS (на самом деле с MODExt, его собственная модификация Ext JS, но они довольно-таки близки для начинающих). Нашей первой задачей - будет создание HTML станицы, которая загружает все необходимые Ext JS компоненты. А именно 3 компонента:

- Стили (CSS)
- Базовый JS
- Все JS

В этом примере создадим файл в корне вашего MODX сайта, назовём его “a.html” и дадим ссылку на Ext JS компоненты, которые находятся в составе MODX менеджера (возможно вам нужно будет поменять пути, если вы поменяли путь manager/ на другой).

Демо Пример 1 Если вы хотите сделать сообщение более значимым, то можете добавить переменные для названия и сообщения:

В любом случае, результат один и тот же: когда вы попадаете на эту страницу в браузере, у вас появится всплывающее окно (как на рисунке). Этот тест - это встроенная Javascript функция и таким образом мы тестируем JS функционал.

Итак если у вас получилось вывести первое сообщение с кнопкой Ок, то примите поздравления! Вы написали свой первый скрипт в MODExt!

Отладка

Если у вас есть какие-то проблемы с этим базовым тестом, попробуйте установить Firebug плагин для браузера Firefox, я же пользуюсь Инструментами разработчика Google Chrome. В консоли можно увидеть Javascript ошибки.

Подсказки MessageBox

Объект MessageBox это не просто только всплывающие подсказки, его можно использовать для других сложных вещей. Вы можете использовать для ввода каких-либо данных пользователя. Автоматически окно выдаст “ОК” или “Отменить” кнопки.

Запросив пользователя ввести данные, вам нужна обратная функция наподобие такой:

Мы использовали лямбда-функцию для myCallback и для некоторых это может быть странным. Это же можно сделать другим способом:

Результат потестить можно здесь (открываем панель инструментов Google Chrome и консоль и смотрим) - Демо Пример 2

Посмотрите в консоль Хрома. Увидите там вывод ваших ввёдённых данных:

Из рисунка можно увидеть, что переменная btn приходит как ok или cancel (маленькими буквами). Таким образом можно описать логику в функции обработки этих результатов.

Улучшенный MessageBox

Много чего можно сделать с панелью сообщений. Вот простой пример:

Демо Пример 3

Обратите внимание на атрибуты “icon” и “buttons”.

Иконки

Вы можете воспользоваться следующими константами как аргументами для Ext.MessageBox.show() атрибута “иконка”:

- Ext.MessageBox.INFO
- Ext.MessageBox.ERROR
- Ext.MessageBox.QUESTION
- Ext.MessageBox.WARNING

Кнопки

Вы можете воспользоваться следующими константами как аргументами для Ext.MessageBox.show() атрибута “кнопки”:

- Ext.MessageBox.OK
- Ext.MessageBox.CANCEL
- Ext.MessageBox.OKCANCEL
- Ext.MessageBox.YESNO
- Ext.MessageBox.YESNOCANCEL

Меньше значит больше Ext.Msg это короткое выражение обозначающее Ext.MessageBox

Улучшенный подход

Метод Ext.MessageBox.show() - это ваш билет к мастерсту во всплывающих сообщениях (или их коротких эквивалентах Ext.Msg), но не всегда очевидно как нужно делать подсказки пользователю. Трюк состоит в использовании многострочного атрибута.

Демо Пример 4

Значение 20 здесь представляет собой пиксели. Вы можете установить его просто в “true” и получить небольшую текстовую область. Значение атрибута “value” обозначает текст, который будет находится в строке ввода.

Источники информации:

    - Официальна документация по extJS находится по адресу: [http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.MessageBox](http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.MessageBox)
    - Оригинал статьи: [1. Ext JS Tutorial - Message Boxes](http://rtfm.modx.com/display/revolution20/1.+Ext+JS+Tutorial+-+Message+Boxes)