Использование Javascript для загрузки другого файла

С Ext JS можно просто делать Ajax запросы к другим страницам. Этот пример использует простой Ext JS инструмент: всплывающее окно. Обратите внимание, что включаем как и ранее стили и скрипты в наш HTML:

a.html

Мы передали имя функции обратного вызова к команде Ext.onReady().

Содержимое файла a.html:

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

b.html

Как вы уже, наверное, обратили внимание, Javascript скрипт ссылается на файл b.html. Давайте создадим его вместе с a.html в корне нашего сайта.

Вот что можно поместить в b.html и сохранить его:

Теперь при открытии a.html в браузере вы увидите всплывающее окно, которое содержит контент файла b.html:

Демо Пример 1

Если всё сработало правильно вы увидите, что окно окрасилось в жёлтый цвет, а затем исчезло. Круто, правда?

Интересно то, что мы смогли поместить некоторый Javascript в b.html и дать ему власть управлять своим поведением. Когда вы включаете HTML или текст через Javascript, то не всегда даётся возможность скрипту в загруженной странице быть включённым и выполняемым (этот трюк будет гораздо сложнее выполнить используя jQuery, например). Обратите внимание, что Ext JS позволяет нам указывать scripts : true когда мы ссылкаемся на b.html.

Обзор метода

Ext.onReady()

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

Вы готовы? Почти всё, что вы делаете с Ext JS проявится после того, как загрузилась DOM, поэтому вы будете использовать Ext.onReady() почти на каждой странице, которую будете создавать с помощью Ext JS и почти каждая строка написанная вами будет всредине этого блока.

Эквивалент аналогичного обработчика на jQuery:

$(function() {

});

Ext.getCmp()

Вот как Ext JS может выбирать элементы DOM. Функциональность очень схожа с jQuery, но синтакс немного отличается. Мы по-прежнему будем обращаться к элементам через его ИД, но ExtJS не использует хештег “#” в качестве селектора.

Что интересно в вышеприведеном примере - это то, что Ext JS создал новый ИД на лету в Ext.Window() методе и далее он был принят Ext.getCmp() методом. Видите? Мы передали “id: ‘my_window’” как аргумент в Ext.Window(). Если вы привыкли искать в HTML коде атрибут “id”, то это может вас вначале слегка запутывать, но как видите Ext JS создаёт вещи в окне браузера не прибегая к необходимости использовать существющий HTML код.

.delay()

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

Различный синтаксис

Чем больше вы занимаетесь разработкой Javascript, тем больше вы привыкаете к сдвинутому синтаксису. Иногда легче читать включённые функции (также известные как анонимные или лямбда функции), в других случаях легче использовать функцию обратного вызова. Вышеприведенный код файла a.html мог быть реализован следующим образом:

Аналогично, код файла b.html мог бы быть связан следующим образом:

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