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:
Демо Пример 1Если всё сработало правильно вы увидите, что окно окрасилось в жёлтый цвет, а затем исчезло. Круто, правда?
Интересно то, что мы смогли поместить некоторый 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 вы станете всё более уверенно чувствовать себя переключаясь на другие поддерживаемые синтаксисы.
Jul 03 2013 extJS AJAX перевод документации Виктор Матушевский