Главная > AJAX, ExtJS Framework, Open Source, Разное > ExtJS.UpdateManager — удобное средство обновление частей страницы — II

ExtJS.UpdateManager — удобное средство обновление частей страницы — II

22 октября 2007

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/vr269624/abrdev.com/www/wp-content/plugins/code-highlighter/geshi.php on line 2147

В предыдущей части статьи мы начали рассматривать компонент ExtJS.UpdateManager и его части. Так как в основном вам придётся иметь дело только с ним, в большинстве типичных случаев применения, то сейчас основное внимание уделим его методам и свойствам.

  • disableCaching - как уже описывалось в первой статье, используется для кёширования запросов.
  • el - содержит объект (типа Ext.Element), который обновляется этим менеджером. Впрочем, если вы используете переопределённый рендер для обновления не DOM-узлов, то здесь будет содержатся ваша переменная или объект.
  • indicatorText -HTML-код сообщения, которое увидит пользователь в процессе обновления.
  • loadScripts - разрешение или запрет на исполнение JavaScriptиз загружаемого кода.
  • renderer - содержит объект, который производит, собственно, само обновление, вернее его конечный этап, обрабатывая полученную информацию и обновляющий элемент el.
  • showLoadIndicator - указывает, отображать ли индикатор процесса загрузки и обновления, определяемый в indicatorText.
  • sslBlankUrl - используется при соединении по протоколу SSL.
  • timeout - таймаут, время ожидания ответа в секундах до сброса соединения.
  • transaction - объект транзакции, который используется Ext.AJAX для выполнения запросов.

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

Теперь примемся за методы. Их довольно много, и часть является довольно специфическими, поэтому мы опишем только те, что могут пригодится в типичной работе.

  • abort - метод прерывает текущую операцию обновления. Это может быть полезно при взаимодействии с пользователем, когда в какой-то момент времени необходимо отменить операцию. Отмене подлежит только текущая updater.setDefaultUrl('http://localhost/ext_test_01.php'); транзакция, не затрагивая все остальные.
  • formUpdate - обновляет форму, к примеру, в приложении, где нужно прозрачная функция сохранения данных updater.вводимых в форму и т.п. Примечание: в данной статье я не рассматриваю функциональность компонента, связанную с обновлением форм, так как не работал с этим, но в дальнейшем будет отдельная статья, посвящённая этому вопросу.
  • getEl - возвращает элемент, к которому прикреплён текущий UpdateManager. Используйте этот метод для получения ссылки на объект, а не прямой доступ к свойству UpdateManager.el.
  • isUpdating - метод позволяет получить текущий статус выполнения запроса - true, если выполняется запрос или обработка ответа, false в других случаях. Если же требуется узнать низкоуровневое состояние запроса, следует обращаться к объекту transaction.
  • refresh - При вызове этого метода используется либо последний URL, либо заданный по дефолту, в случае отсутствия операция прерывается без возникновения события failure (более того, в таком случае он ничего и не возвращает, что странно, лучше было бы возвратить значение null. Впрочем, вы можете самостоятельно поправить исходный код). В качестве параметра можно задать callback-функцию, которая будет выполнена после завершения обработки запроса (тут возможна коллизия с событием update, однако они отличаются данными, передаваемыми в функцию. В refresh функции передаётся идентификатор объекта, который обновлялся и статус результата операции, в то время как событие update позволяет получить само содержимое ответа - объект oResponseObject). Обратите внимание - refresh использует уже предварительно заданные все параметры запроса, не позволяя установить их в другие значения.
  • setDefaultUrl - метод устанавливающий переданный ему URL В качестве дефолтного для использования этим менеджером. К примеру, дальнейшие обращение к методу refresh будут использовать именно этот URL. Интересная особенность - вы можете передать в качестве параметра и функцию, которую следует вызвать для получения URL. Причем, функция вызовется не в момент установки, а при первом вызове refresh или update методов - по сути, отложенное связывание параметров.
  • setRenderer - устанавливает переданный ей объект в качестве рендера для обработки ответа сервера.
  • showLoading - можно вручную установить объект в состояние обновления (показать индикатор загрузки и т.д.), он же вызывается и при обновлении автоматически, его можно перегрузить для выполнения собственного кода (в чем-то аналогично событию beforeupdate).
  • startAutoRefresh - позволяет автоматизировать постоянное обновление, через равные промежутки времени. Принимает следующие параметры: интервал обновления, в секундах, URL для обновления, либо, если не задан, используется последний или defaultUrl, объект или строка с параметрами, которые будут добавлены в запрос (в виде уже корректной строки GET запроса, или объекта вида {param : "value"}), callback-функция, которая будет вызываться при выполнении обновления - аналог из метода refresh (впрочем, именно так и действует авторефреш - по таймеру вызывается refresh), логический параметр, указывающий на то, следует ли сразу вызвать обновление, либо после вызова метода начать отсчёт указанного интервала.
  • stopAutoRefresh - отменяет автоматическое обновление.
  • update - наконец, по сути, главная функция. Принимает несколько параметров, но обязательным является только один - URL. Впрочем, он может быть и объектом, который задаёт конфигурацию UpdateManager-а, описывая все вышеуказанные параметры, которые заменяют дефолтные.

Из событий объект UpdateManager генерирует только три:

  • beforeupdate - генерируется сразу после вызова update или refresh, в том числе и при автоматическом обновлении.
  • failure - возникает при прерывании запроса или ошибке в его подготовке или обработке. Для получения расширенной информации про выполнение запроса, используйте свойство transaction.
  • update - возникает после удачного выполнения запроса.

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

На странице у нас есть элемент "my_server_info", который определён как <div id="my_server_info" width="100%" height="90%">, а также обычная кнопка, по нажатию на которою мы хотим получить от сервера служебную информацию об используемой версии PHP.

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

  1.  
  2. // мы получаем объект типа Ext.Element для нашего слоя,
  3. // в котором будет отображаться информация с сервера
  4. "my_server_info");
  5.  
  6. // теперь получим UpdateManager для этого элемента
  7. // так как это у нас первый вызов, то нужно установить
  8. // основные параметры для обновления
  9. 'http://localhost/ext_test_01.php'); // установили URL
  10.  
  11. //кстати, если нужно установить, к примеру сессию, то можно сразу так:
  12. 'http://localhost/ext_test_01.php?PHPSESSID=' + sessid);
  13. // для упрощения кода я подразумеваю что у вас есть уже сессия
  14. // в глобальной переменной sessid
  15.  
  16. //все, теперь обновляем - либо просто рефрешем
  17. updater.refresh(); // этого достаточно, дальше UpdateManager все сделает сам!

Можно попробовать и другой вариант обновления:

  1. span style="color: #3366CC;">'http://localhost/ext_test_01.php');
  2.  
  3. // переопределим сообщение про обновление так,
  4. // чтобы оно писалось в консоль Firebug-а
  5. "обновление элемента...");};
  6.  
  7. // вызываем обновление с установкой опциональных параметров
  8. //Внимание: параметр URL отличается от дефолтного.....
  9. updater.update('http://localhost/ext_test_01_new.php'// определяем callback-функцию обновления
  10. "Обновился элемент:" + oElement);
  11. console.log("Что вернул сервер? "// а теперь снова вызовем просто refresh
  12. updater.refresh();
  13. // Теперь обновление дальше происходит
  14. // по заданному через setDefaultUrl адресу!

Ну и серверный код этого примера простой:

  1.  
  2. // выводим служебную информацию о РНР

И напоследок, пример с автоматическим обновлением (к примеру, это будет счётчик):

  1. До завершения операции осталось: <span id="my_counter">100</span> сек.
  1. span style="color: #3366CC;">"my_counter"'http://localhost/ext_test_02.php');
  2.  
  3. // установим интервал обновления 3 секунды
  4. // для своевременной отмены рефреша нужен callback
  5. // а вот сама callback функция
  6. // получить ссылку на объект - узел DOM, который мы обновляли
  7. 'object'// там конечно объект сразу, но проверить стоит.
  8.  
  9. // получаем содержимое узла в виде числа
  10. // остановить обновление, если достигли 0
  11. // покажем сообщение
  12. 'Status', 'Операция успешно завершена.'

Вот, в этих основных примерах и описаниях мы рассмотрели компонент UpdateManager и основные приёмы работы с ним. Вы также можете обратится к документации по библиотеке ExtJS и к самим исходникам, что очень поможет в исследовании внутренней работы компонентов. Ну и, конечно, эксперименты и отладка с помощью Firefox + Firebug

  1. 24 октября 2007 в 11:41 | #1

    Подскажите кто знает, где находится код, который отвечает за подгрузку и выполнение скриптов. В самом UpdateManager его нету.

  2. 24 октября 2007 в 11:56 | #2

    Почему нету, там есть..

    if(this.loadScripts){
    this.renderer.render(this.el, response, this,
    this.updateComplete.createDelegate(this, [response]));
    }else{
    this.renderer.render(this.el, response, this);
    this.updateComplete(response);

    из метода processSuccess, далее код передается в рендер:

    render : function(el, response, updateManager, callback){
    el.update(response.responseText, updateManager.loadScripts, callback);
    }

    а здесь, как видим — ссылка на метод update из класса Ext.update, в котором все что вас интересует.

  3. 24 октября 2007 в 16:17 | #3

    Ага, спасибо нашел …
    примитивный — т.е. простой алгоритм — будут трудности со сложными скриптами …

  4. 24 октября 2007 в 17:48 | #4

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

  5. 24 октября 2007 в 17:52 | #5

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

  6. 24 октября 2007 в 20:13 | #6

    согласен, если писать проект самому — планировать его изначально с учетом екст — то нет смысла усложнять и так сложное … нивкоем случае не качу бочку на Extjs, сам успешно его использую …
    просто констатирую факт — что механизм AHAH — в данной либе слабоват со стороны динамической подгрузки жабаскрипта …

    ну пусть не слабоват — не на 100% обеспечивает поддержку модульности в веб

  7. 24 октября 2007 в 20:21 | #7

    для костылей в уже текущих проектах екст слабо подходит 🙂

    Не вижу других и не знаю других возможностей… подгрузить в виде ссылки (src атрибут) или напрямую через евал. что еще есть? что именно позволяет обойти траблу сложных кодов? и заодно, что именно, какой код неверно будет исполняться, и какой вариант альтернативной загрузки и исполнения его исполнит верно? примеры, ссылки, напишите статью я размещу 🙂 с удовольствием

  8. 25 октября 2007 в 00:02 | #8

    Мой намек понял, это хорошо 🙂 … Я собирался давно уже написать статью про динамическую загрузку жабаскрипта …
    в один прекрасный день я взялся за реализацию этого дела… если бы сразу знал сколько будет трудностей — наверно бы не брался … искал бы уже готовое …

    есть знания проблемных мест, примеры проблемных ситуаций и самое главное варианты решения …

    надо бы списаться — может совместную статью напишем …

  9. 25 октября 2007 в 00:30 | #9

    fullajax.ru это не вы случаем?

    там, кстати, странный термин 🙂 «Прямые ссылки на AJAX сгенерированные вебстраницы», нету вроде такого понятия, как аякс сгенерированая вебстраница

    Контакты велкам:
    ICQ: 346525015
    Gmail: aleks.raiden@gmail.com
    Skype: aleks_raiden
    MailRu Agent: aleks_raiden@mail.ru

  10. 25 октября 2007 в 01:01 | #10

    да, моя работа …
    Прямые ссылки на AJAX сгенерированные вебстраницы —

    AJAX сгенерированные — которые создаются динамически, с помощью АЯКС … наверно не очень удачное словосочетание 🙂

    спишемся, завтра на свежую голову 😉

  11. 25 октября 2007 в 12:23 | #11

    списались 🙂 вышло отлично 🙂 есть материал как минимум для двух статей, которые, по моему мнению, будут уникальными в рунете 🙂

  12. zeleniy
    26 июня 2008 в 16:06 | #12

    Хорошо, что вы есть конечно, но у вас код устарел… или по крайней мере под 2.1 версию отсутствует.

    Согласитесь, что вряд ли сейчас кто то будет скачивать первую версию.

  13. 27 июня 2008 в 08:41 | #13

    zeleniy — во-первых, есть много областей, где достаточно и этого функционала из 1-й версии. Тем более, в 2.х ветке в части этого компонента не так сильно что-то сменилось, чтобы не почерпнуть из материала много полезного. Это же не руководство, это начальные посылы для самостоятельного исследования.

  14. Владимир
    16 июля 2009 в 17:10 | #14

    Подскажите плз как переписать(перехватить) beforeupdate, failure и update события!
    Спасибо!!!

    • 16 июля 2009 в 17:44 | #15

      поставить свои обработчики — или через on метод, или в описании компонента через свойство listeners

  15. Владимир
    16 июля 2009 в 17:53 | #16

    А можно пример…

    вот код:
    Ext.get(‘loader’).load({
    waitMsg:’Загрузка…’,
    url:this.url,
    scripts:true,
    discardUrl: true,
    nocache: true,
    timeout: 5,
    callback : function(){
    УЖЕ РЕШИЛ СЮДА ПИХАТЬ с проверкой саксеса
    }
    });

  16. Владимир
    16 июля 2009 в 17:56 | #18

    @Владимир
    Может можно попроще листернеры добавить, тем более, что beforeudate в колбек не засунешь!

  17. Владимир
    16 июля 2009 в 18:00 | #19

    @aleks_raiden
    так у функции load в принимающем объекте нету переменной listeners

    _какие там параметры по доке — с єтим понятно:
    el : Ext.Element
    url : String/Object/Function
    params : String/Object

    • 16 июля 2009 в 18:04 | #20

      ну да, потому что лоад это функция а не компонент. листенерс ставится на компонент или на объект страницы, который обновляется. например через Ext.get(‘id’).on() — в случае установки потом.

  18. Владимир
    16 июля 2009 в 18:25 | #21

    @aleks_raiden
    Ладно, спасибо, но как Ext.get(’id’).on() поставить я знал, просто то мой блок лоадера еще не создан, когда ява-скрипты загружаются и приходится ставить его в инит или в онреди.

  19. Владимир
    16 июля 2009 в 18:29 | #22

    и не срабатывает почемуто:

    Ext.get(‘loader’).on({
    ‘beforeupdate’:function(){
    Ext.get(‘loading’).show();
    },
    ‘update’:function(){
    Ext.get(‘loading’).hide();
    },
    ‘failure’:function(response){
    Ext.get(‘loading’).hide();
    Ext.MessageBox.alert(‘Ошибка’, ‘Возможно на стороне сервера произошла ошибка либо Вы неавторизированы. Невозможно получить данные!’);
    }
    });

    Может он не знает таких ивентов?

  20. mor
    25 августа 2009 в 22:17 | #23

    Подскажите как можно создать элемент управления динамически? Т.е., допустим, прочитать из БД список элементов формы и тут же их создать.

    • 26 августа 2009 в 00:45 | #24

      ну точно также — var tmp = new Ext.Button({}); Берете с базы нужные поля, формируете json-массив конфига и все.

Комментирование отключено.