Ext JS - Ajax

Последнее обновление 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

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

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

<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>

a.html¶

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

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

<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">
       function buildWindow() {
           var win = new Ext.Window({
               id: 'my_window'
               , title : "Добро пожалователь в Ext JS"
               , width : 300
               , height: 150
               , layout: "fit"
               , autoLoad: {
                   url : "b.html"
                   , scripts : true
               }
           });
           win.show();
       }
       Ext.onReady(buildWindow);
   </script>
   <body>
       <h1>Ввод в Ext JS</h1>
        <p>Я загрузил этот HTML в корень моего сайта и включаю библиотеки Ext JS, которые поставляются вместе с менеджером MODX.</p>
   </body>
</html>

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

b.html¶

Как вы могли заметить, JavaScript ссылался на файл с именем b.html. Давайте создадим его вместе с a.html в корне нашего сайта MODX.

Вот что мы поместим в файл b.html и сохраним его:

<div>Вот моя полезная нагрузка Ajax!</div>
<script type="text/javascript">
   function highlightWindow() {
       var win = Ext.getCmp('my_window');
       var winBody = win.body;
       winBody.highlight();
   }
   highlightWindow.defer(1000);
</script>

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

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

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

Обзор методов¶

Ext.onReady()¶

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

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

$(function() {
});

Ext.getCmp()¶

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

<script type="text/javascript">
   var win = Ext.getCmp('my_window');
   // в отличие от селектора jQuery:
   var win = jQuery('#my_window');
</script>

В приведенном выше примере интересно то, что Ext JS создал новый id на лету в методе Ext.Window(), а затем к нему обратился Ext. .getCmp(). Видите это? Мы передали "id: 'my_window'" в качестве аргумента Ext.Window(). Если вы привыкли искать в HTML атрибуты «id», эта небольшая ловкость рук могла вас смутить, но вы уже можете понять, что Ext JS рисует элементы на экране браузера без необходимости в существующем HTML.

.delay()¶

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

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

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

   <script type="text/javascript">
       Ext.onReady(function() {
           var win = new Ext.Window({
               id: 'my_window'
               , title : "Добро пожаловать в Ext JS"
               , width : 300
               , height: 150
               , layout: "fit"
               , autoLoad: {
                   url : "b.html"
                   , scripts : true
               }
           });
           win.show();
       });
   </script>

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

<div>Вот моя полезная нагрузка Ajax!</div>
<script type="text/javascript">
   function highlightWindow() {
       Ext.getCmp('my_window').body.highlight();
   }
   highlightWindow.defer(1000);
</script>

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

Регулярные запросы Ajax¶

Есть моменты, когда вы не хотите полагаться на панель Ext, окно или форму для инициирования Ajax-запроса. Например, может быть, вы хотите запустить этот тип действия через событие onclick, и вы не хотите загружать jQuery или какую-либо другую библиотеку для выполнения этой общей задачи. Посмотрите на этот пример, который отправляет некоторые значения (myvar) на удаленный URL, а затем декодирует возвращенный JSON.

<script type="text/javascript">
   function makeAjaxRequest(var1) {
       Ext.Ajax.request({
           url: 'http://yoursite.com/some/controller',
           params: {
               myvar: var1
           },
           success: function(response, opts){
               // Если ответ возвращается в формате JSON, вы должны декодировать его
               var obj = Ext.decode(response.responseText);
               Ext.fly('some_div').update('Success!');
           },
           failure: function(response, opts) {
               Ext.fly('some_div').update('Fail!');
           },
       callback: function(options,success,response){
       // используйте этот метод, если вам нужно выполнить собственную проверку успеха/неудачи
       }
       });
   }
</script>

Документация ExtJS не очень полезна для такого рода вещей, но на самом деле, эти разовые типы очень распространены.

Примечание: обнаружение успеха/неудачи здесь основывается на формате JSON. Это плохо документировано, но ExtJS будет реагировать на JSON-ключ «success», содержащий логическое значение (true/false). Если вы не можете контролировать формат JSON (или не хотите), вы можете реализовать параметр «обратного вызова», который будет вызываться независимо от того, считает ли ExtJS ответ успешным или неудачным.

Также взгляните на команду Ext.fly: она позволяет вам манипулировать div на лету.