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

Меняем вид всплывающих сообщений Ajaxform (Modx Revo)

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

Изменение стилей и положения всплывающего окна Ajaxform

AjaxForm для стилизации окон использует стили jGrowl, которые лежат в assets/components/ajaxform/css/lib/jquery.jgrowl.min.css, можно поправить все прямо там, но если вы обновите компонент, то и стили ваши обновятся на дефолтные, следовательно их лучше предопределить в своем css.

к примеру положение окна по дефолту заданно вот таким стилем

.jGrowl.top-right { top:0; right:0; }

.jGrowl.top-right {

top:0;

right:0;

}

те прижато к верху и правой стороне

чтобы сменить положение, к примеру по центру, достаточно предопредилить их в своем css, к примеру так:

.jGrowl.top-right { top:40% !important; width:30% !important; left:35% !important; }

.jGrowl.top-right {

top:40% !important;

width:30% !important;

left:35% !important;

}

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

#jGrowl { font-size:18px; margin:0px 12px 0; } .jGrowl.top-right { left:35% !important; top:35% !important; } #jGrowl .jGrowl-notification { position: relative; width: 320px; padding: 15px; text-align:center; background: none repeat 0 0 #fff !important; box-shadow: 0 0 0 7px #8ab933 !important; border: 0px solid rgba(255, 255, 255, 0.49) !important; } #jGrowl .jGrowl-notification .jGrowl-close { position: absolute; right: 4px; top: 4px; color: #8ab933 !important; } #jGrowl .jGrowl-notification .jGrowl-message { color:#8ab933 !important; }

#jGrowl {

font-size:18px;

margin:0px 12px 0;

}

.jGrowl.top-right {

left:35% !important;

top:35% !important;

}

#jGrowl .jGrowl-notification {

position: relative;

width: 320px;

padding: 15px;

text-align:center;

background: none repeat 0 0 #fff !important;

box-shadow: 0 0 0 7px #8ab933 !important;

border: 0px solid rgba(255, 255, 255, 0.49) !important;

}

#jGrowl .jGrowl-notification .jGrowl-close {

position: absolute;

right: 4px;

top: 4px;

color: #8ab933 !important;

}

#jGrowl .jGrowl-notification .jGrowl-message {

color:#8ab933 !important;

}

в итоге всплывает вот такое окошко по центру сайт.

новый вид уведомляшки в аякс форм

web-revenue.ru

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

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

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

modx.ws

Готовый сайт сервиса вопросов и ответов на MODX Revolution

Процесс установки очень простой и с ним справится даже новичок не имеющий опыта работы с MODX Revolution!Для начала необходимо зарегистрировать хостинг. Для этого переходим по ссылке нажимаем кнопку хостинг

Хостинг для MODX

Далее выбираем тарифный план. Достаточно будет выбрать тариф минимальный.

На следующей странице вам необходимо ввести данные для регистрации и номер телефона на который вы получите смс для подтверждения аккаунта.

После подтверждения по смс вам будут высланы данные для входа в панель управления.

Хостинг зарегистрирован. Вам выдан тестовый поддомен на который можно установить MODX и запустить тестовый сайт на котором вы сможете его наполнить контентом и после перенести на основной домен для запуска. Можно конечно же сразу прикрепить к панели управления ваш домен и установить сразу все на рабочий домен. Ниже показано как установить MODX.

Главная страница панели управления хостингом Бегет. Здесь мы нажимаем кнопку CMS

На следующей странице выбираем систему управления контентом MODX

В всплывающем окне необходимо выбрать домен на который будет установлена система управления контентом MODX Revolution. Так же необходимо указать логин, email и пароль администратора. C помощью введенных данных вы в последствии авторизуетесь в панели управления сайтом. Остальные параметры такие как база данных и прочее можно оставить по умолчанию.

После нажатия на кнопку установить вы получите уведомление о том что MODX успешно установлен.

Переходим в административную панель сайта по адреса http://адрес сайта/manager и вводим данные указанные при установке CMS логин и пароль и попадаем на главную страницу админки сайта.

В Верхнем меню выбираем Приложения -> Установщик

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

Откроется окно в котором необходимо нажать кнопку Выберите файл и в следующем окне вам необходимо выбрать файл который вы получили после оплаты покупки.

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

Всем удачных покупок и процветания ваших проектов.