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.MessageBox.show() - это ваш билет к мастерсту во всплывающих сообщениях (или их коротких эквивалентах Ext.Msg), но не всегда очевидно как нужно делать подсказки пользователю. Трюк состоит в использовании многострочного атрибута.
Демо Пример 4Значение 20 здесь представляет собой пиксели. Вы можете установить его просто в "true" и получить небольшую текстовую область. Значение атрибута "value" обозначает текст, который будет находится в строке ввода.
Источники информации:
- Официальна документация по extJS находится по адресу: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.MessageBox
- Оригинал статьи: 1. Ext JS Tutorial - Message Boxes
silkin
02.07.2013 16:31Может подскажете как к примеру вот в таком окне http://newpg.ru/documentation/extjs/extjs_lessons/lesson2.html вывести содержимое чанка или сниппета modx ?