1. Ext JS Tutorial - Окна сообщений

Последнее обновление Dec 5th, 2019 | История страницы | Улучшить эту страницу | Сообщить о проблеме

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$306 per month—let's make that $500!

Learn more

Your First Ext JS Script¶

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

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

Для этого примера создайте файл в корневом каталоге вашего сайта MODX с именем «a.html» и укажите ссылки на компоненты Ext JS, входящие в состав менеджера MODX (вам может потребоваться изменить URL-адрес менеджера, если вы настроили путь менеджера).

<html>
    <title>Моя тестовая страница Ext JS</title>
    <link  rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
    <script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.MessageBox.alert('Мой заголовок','DOM подготовлен...');
        });
    </script>
    <body>
        <h1>Ввод в Ext JS</h1>
        <p>Я загрузил этот HTML в корень моего сайта и включаю библиотеки Ext JS, которые поставляются вместе с менеджером MODX.</p>
    </body>
</html>

Или, если вы хотите вызвать предупреждение с большим количеством деталей, вы можете установить переменные для заголовка и сообщения:

Ext.onReady(function() {
    var title = 'Мой заголовок';
    var msg = 'DOM подготовлен...';
    Ext.MessageBox.alert(title,msg);
});

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

Поздравляем! Вы написали свой первый скрипт в MODExt!

Отладка¶

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

Запрос¶

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

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

<script type="text/javascript">
Ext.onReady(function() {
    var title = 'Необходим ввод';
    var msg = 'Пожалуйста, введите какой-нибудь текст.';
    var myCallback = function(btn, text) {
        console.info('Вы нажали ' + btn);
        if (text) {
            console.info('Вы ввели '+ text);
        }
    }
    Ext.MessageBox.prompt(title,msg,myCallback);
});
</script>

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

<script type="text/javascript">
function myCallback(btn, text) {
    console.info('Вы нажали ' + btn);
    if (text) {
        console.info('Вы ввели '+ text);
    }
}

Ext.onReady(function() {
    var title = 'Необходим ввод';
    var msg = 'Пожалуйста, введите какой-нибудь текст.';
    Ext.MessageBox.prompt(title,msg,myCallback);
});
</script>

Результат должен выглядеть так:

Это хорошее время, чтобы усилить отладчик Firebug. Используем console.log или console.info для печати на консоль Firebug. Когда вы активируете Firebug и просматриваете вкладку консоли (по умолчанию она активна), вы можете видеть результат ваших вызовов в методах консоли:

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

Улучшенное окно сообщения¶

С помощью скромного окна сообщений вы можете сделать многое. Вот пример, чтобы дать вам представление о различных доступных свойствах.

<script type="text/javascript">
Ext.onReady(function() {
    var myCallback = function(btn, text) {
        console.info('Вы нажали ' + btn);
        if (text) {
            console.info('Вы ввели '+ text);
        }
    }
    Ext.MessageBox.show({
        title : 'Будьте осторожны!',
        msg : 'Вы уверены?',
        width : 300,
        buttons : Ext.MessageBox.YESNOCANCEL,
        fn : myCallback,
        icon : Ext.MessageBox.QUESTION
    });
});
</script>

Обратите внимание на атрибуты «значок» и «кнопки».

Иконки¶

Вы можете использовать следующие константы в качестве аргумента для атрибута "icon" 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), но может быть не совсем очевидно, как сделать запрос пользователю. Хитрость заключается в использовании атрибута multiline.

<script type="text/javascript">
Ext.onReady(function() {
    var myCallback = function(btn, text) {
        console.info('Вы нажали ' + btn);
        if (text) {
            console.info('Вы ввели '+ text);
        }
    }
    Ext.MessageBox.show({
        title : 'Подтвердите ваше имя',
        msg : 'Исправьте орфографические ошибки ниже:',
        width : 300,
        multiline: 20,
        value : 'Yodah',
        buttons : Ext.MessageBox.YESNOCANCEL,
        fn : myCallback,
        icon : Ext.MessageBox.WARNING
    });});
</script>

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

См. официальную документацию для получения дополнительной информации: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.MessageBox