Ext JS урок 1. Ваш первый extJS скрипт. Окна сообщений

Ваш первый 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" обозначает текст, который будет находится в строке ввода.

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