Главная > AJAX, ExtJS Framework, ExtJS Tips, Open Source, web2.0, веб-обзоры > ExtJS Tips&Hacks: автоматическая загрузка библиотеки ExtJS по требованию.

ExtJS Tips&Hacks: автоматическая загрузка библиотеки ExtJS по требованию.

25 февраля 2009

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

ext_bld_logo1Приветствуем наших читателей. В этом выпуске нашей новой рубрики ExtJS Tips&Hacks мы поговорим о возможности динамической предзагрузки библиотеки по требованию. Изначально, для использования фреймворка, Вам надо на странице подключать сначала стилевой файл, потом адаптер, которые реализует основной функционал, а в случае использования другой AJAX-библиотеки в качестве основы, сначала и ее дистрибутив. И только потом уже основной файл ExtJS, либо его debug-версию на этапе разработки. Конечно, сократить время загрузки поможет объединение всех файлов в один, сжатие gzip и другие методики. Но...

Но что, если задача достаточно узкая, например, я столкнулся с ней, когда некоторый веб-сайт использует ExtJS для предоставления формы добавления и редактирования материалов. При этом процесс редактирования он достаточно редкий, в смысле что не каждый пользователь постоянно будет им пользоваться, кроме этого, работа с сайтом в режиме без регистрации отличается только отсутствием возможности редактирования. Загружать же сразу все файлы, а это почти 600 Кб, пусть даже тщательно собранной версии специально под проект, с учетом его потребностей, это достаточно накладно, и не хотелось бы грузить их всем пользователям.

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

В случае же зарегистрированного пользователя картина немного изменяется. Ему уже надо сделать доступными инструменты редактирования информации, но все же велика вероятность, что он ими так и не воспользуется, поэтому мы не собираемся и на этом этапе ему загружать всю библиотеку ExtJS. А делаем следующее.

Изначально к странице добавляется стилевой файл из дистрибутива ExtJS. Из скриптов мы используем сборку библиотеки, использующую jQuery и специальный адаптер. Вот эти два файла мы объединим в один, сначала минифицированную версию jQuery, потом Ext-jquery-adapter. И этот скрипт загружается на страницу. Сжатая версия CSS от ExtJS занимает примерно 40 Кб (особенно, если и ее откорректировать под нужды проекта), а минифицированный скрипт, объединяющий необходимые библиотеки - 73 Кб, и это все пока без учета возможностей gzip-сжатия.

В результате мы получаем на странице, во-первых, основные возможности от jQuery, и, главное, самое-самое минимальное ядро от ExtJS, буквально основные функции и возможности корневого класса Ext и его расширения для стандартных объектов JavaScript (например, String, Array и Date при использовании ExtJS получают некоторые "бонусы").

Если посмотреть в код библиотеки, то там видно, что основной файл, ext-all.js содержит все остальные компоненты, при этом он расширяет уже предварительно загруженный класс Ext. А это означает, что он может быть загружен в произвольный момент уже после загрузки всей страницы и после его исполнения браузером мы получим "на лету" все нужные нам возможности. Главное, что необходимо - это предварительно уже загруженный адаптер и инициализированную основу для скрипта.

А теперь займемся подгрузкой библиотеки. Так как пока нам не доступны функции из ExtJS, мы для ее инициализации используем функционал из jQuery, а именно - встроенную возможность загрузки произвольного JS-кода на страницу и выполнения переданной Callback-функции после успешной обработки данных. В предыдущих версиях jquery можно было загружать только с текущего домена, сейчас разрешена и кроссдоменная загрузка.

Дополнительно нам надо создать переменную-флаг для оповещения приложения о том, была ли загружена полная библиотека или только ее ядро - средствами ExtJS это узнать затруднительно, потому что как бы библиотека загружена, вместе с тем все основные ее возможности ещё недоступны. Поэтому мы создаем глобальную переменную-флаг для хранения информации о состоянии библиотеки.

Кстати, сразу можно конфигурировать Ext, например, установить опции встроенных сборщиков мусора и другие, например путь для констант BLANK_IMAGE_URL, эти возможности ядра доступны сразу после инициализации. Если Вам надо производить дополнительные настройки, например, инициализацию менеджера cookie, то рекомендую вынести все это в отдельную функцию, которую мы потом будем автоматически вызывать после загрузки.

И теперь финал, который совсем простой. Функция _loadExtJS_andRun принимает единственный параметр, callback-функцию, которую необходимо выполнить после загрузки библиотеки. Сначала проверяем наш флаг - если ExtJS уже загружен, пропускаем все действия и сразу вызываем callback. Если нет - используем загрузчик из jQuery, который после успешной загрузки вызовет сначала нашу функцию инициализации (если она есть, в примере я инициализирую State Manager для работы с cookie и QuikTip прямо в коде, но это лучше оформить в виде функции), а потом и callback.

  1. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif'//глобальный флаг загрузки
  2. //проверяем флаг
  3. {
  4. //используем загрузчик из JQuery
  5. $.getScript('/inc/extjs/ext-all.js''success'"/"//вызвать калбек

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

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

Самый простой вариант применения - по клику на изображение мы хотим вывести диалоговое окно Ext.Msg.alert, при этом мы не знаем, а наша функция обработки клика и не хочет (да и не обязана) знать, доступен ли ExtJS. Потому мы в обработчике указываем ее как callback-функцию для нашего загрузчика, который самостоятельно проверяет доступность библиотеки, отвечает за ее корректную инициализацию и выполнение нашей функции только тогда, когда все для этого готово.

  1. style="cursor:pointer;"
  2. onclick="javascript: void _loadExtJS_andRun(function(){
  3. Ext.Msg.alert('Alert','Hello, World!');
  4. }); "
  5. src="inc/images/people.png"
  6. border="0"
  7. alt="Your Blog Tagline"
  1. 27 февраля 2009 в 16:08 | #1

    Обнаружилось два вопроса:
    1 — сработает ли кеширование в браузере
    2 — по моему, не работает такая форма задания тултипов —

  2. 27 февраля 2009 в 16:09 | #2

    ext:qtip=»{qtip}» — это через XTemplate

  3. 28 февраля 2009 в 00:44 | #3

    Думаю кешироваться должно в браузере.)

    • 28 февраля 2009 в 02:15 | #4

      там не все так просто, Firebug показывает, что запрос отправляется со случайным параметром в урле для предотвращения кеширования, но разные браузеры по разному реагируют + можно настроить сервер на принудительный возврат ответа, что данные закешированы. Или подкрутить в jQuery этот механизм 🙂

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