Ext JS урок 2. Использование AJAX

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

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

a.html

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

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

b.html

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

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

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

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

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

Обзор метода

Ext.onReady()

Важно, что почти всё, что мы делаем с помощью Javascript проявляется после загрузки страницы (неважно какой фреймворк вы используете). Вот почему 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 вы станете всё более уверенно чувствовать себя переключаясь на другие поддерживаемые синтаксисы.