Pull to refresh

Развёрнутый обзор ExtJS 2.2

Reading time 6 min
Views 2.1K
Буквально позавчера вышла следующая версия мощнейшей библиотеки для построения веб-приложений — ExtJS 2.2. Что же там нового, полезного и интересного мы сейчас и рассмотрим. На Хабрахабре уже был краткий анонс этого события, я же далее расскажу более подробно про все изменения.

И так, сначала о новых компонентах и возможностях.

Появился компонент — группа Radiobox или Checkbox контролов, которые могут теперь задаваться сразу группой, конфигурироваться в одну или несколько колонок. Что интересно, этот компонент изначально был написан одним из участников сообщества, а потом уже перенесён в официальную ветку. Последнее время ExtJS демонстрирует поразительную гибкость и открытость к сообществу разработчиков и в этом релизе есть много компонент, которые первоначально были написаны как расширения независимыми разработчиками, а потом уже, после тестирования и подтверждения популярности и востребованности они включены в сам дистрибутив. Это не может не радовать, так как у всех теперь появилась возможность приобщится к одной из самых мощных разработок среди AJAX библиотек.

Наконец появился один из самых ожидаемых компонент — управление историей переходов History. Ещё помню, как в одном большом проекте писал модуль для навигации по карте, так там пришлось реализовать полностью свой контрол и систему запоминания куда мы переходили. Это была большая и интересная работа, тем не менее теперь моя задача бы намного упростилась. Так как часто лучшей практикой построения приложений на ExtJS является использование одной страницы с Layout-менеджером а уже внутри выводится и динамическим создаются новые разделы, широко применяется компонент вкладок, то только с помощью такого компонента мы можем полноценно управлять перемещением пользователя внутри нашего приложения через привычные ему кнопки Вперёд и Назад. Конечно, можно было очень постараться и ещё раньше использовать такой компонент, применяя решения, созданные для других библиотек, подключая ExtJS через соответствующий адаптер (например, jQuery), но такое решение было бы намного менее гибкое и требовало либо сильных правок для корректной работы с тем же Tab-компонентом, либо ограничивало бы применение. Теперь сложностей никаких не возникнет — мы имеем встроенную систему работы с историей, и можем передвигаться по вкладках табов (с другими элементами, например окнами, ещё не пробовал, хотя там такое поведение выглядит не самым логичным и прозрачным) используя элементы управления браузера, не покидая страницу.

Следующими компонентами стали снова расширения, написанные сторонними разработчиками. Это панель списка с возможностью выбора нескольких элементов (Multiselect), и более мощный компонент — ItemSelector, в котором есть две колонки, и мы можем произвольно перемещать итемы между ними, менять их порядок (как кнопками так и просто используя Drag-n-Drop), формируя произвольную структуру, которую можно сохранить на сервере. Все компоненты могут применяться самостоятельно или как составные части форм и будут корректно проверяться и передаваться вместе с остальными данными на сервер в обработчик форм.



Ещё один очень ожидаемый компонент — FileUploadField теперь полностью поддерживается формами и может принимать в зависимости от настроек и потребностей дизайна как вид простой кнопки, так и полноценного обычного элемента управления по выбору файла. Конечно, выбор файла происходит только после того как пользователь сам кликнет по кнопке и выберет файл, и диалоговое окно стандартное системное, но теперь этот элемент можно вставлять в любые формы без необходимости применять сторонние компоненты. Жаль, что нет немного расширенных возможностей, таких как в других компонентах, например SWFileUploader (пусть он никак и не выйдет релизной версией) — например, очень бы хотелось возможность загружать несколько файлов, историю загрузки и возможность отмены, контроль над процессом, автоматическое распознавание типа файла и подстановка его родной иконки и многое другое, но на самом деле это мелочи — все это можно реализовать, просто расширяя стандартный класс, ведь самое сложное уже позади. Хотите это сделать? Может в следующем релизе мы увидим именно ваш компонент?



Из менее значимых изменений — появление поддержки формата XML для компонента Tree. Теперь мы можем загружать дерево и его отдельные части не только в формате JSON, но и напрямую в XML, используя компонент Ext.ux.XmlTreeLoader. Не могу сказать, что это самое востребованное свойство, но в некоторых случаях если у нас весь интерфейс построен на обмене XML-данными, это будет очень кстати.

Теперь работать с картами (или по крайней мере хоть бы отображать их) станет гораздо легче вместе с компонентом для показа карт от Google в окне Ext.Window. Компонент Ext.ux.GMapPanel позволяет легко открывать в новых окнах необходимые карты и, к примеру, создавать географические или туристические сервисы. Конечно, пока функциональность достаточно ограничена, да и объединение с остальными компонентами ExtJS почти нет (а хотелось бы и получение координат и управление перемещением при помощи своих элементов управления и многое другое), но это ведь только начало.



Из основных обновлений компонент это, пожалуй, все. Но что вот интересно — на самом деле компоненты Ext.ux.XmlTreeLoader и Ext.ux.GMapPanel не вошли в стандартный дистрибутив, и они не описаны в справочной системе (к сожалению), однако присутствуют в списке новых возможностей релиза и есть в каталоге примеров, там же есть и исходники. Они все ещё находятся в пространстве имён для пользовательских расширений, однако судя по тому, что включены в официальные примеры, их можно ожидать в дистрибутиве уже в следующих версиях.

Из ключевых особенностей надо отметить, что появилась полная поддержка браузера Firefox 3 — хотя и ранее в этой версии ExtJS всегда работал очень и очень быстро, но иногда были некоторые артефакты отображения и баги, теперь же заявлена полная совместимость и улучшения в работе основных компонент — таблиц (Grid), контекстных меню в компоненте Tab, а также поправлены ошибки в компоненте Window (связанные с перемещением окна, хотя я никогда не замечал их ранее). Но так как по всей видимости, Firefox 3 теперь станет основным браузером (как минимум, для разработчиков), то эти улучшения не могут не радовать. Вместе с этим ExtJS научился распознавать различные версии браузеров (например, FF 2 и 3, разные версии Safari) и использовать отдельные настройки для повышения совместимости и корректной работы в разных окружениях.

Перейдём к менее заметным изменениям во внутренней структуре библиотеки.

Базовый адаптер Ext.base теперь использует UTF-8 кодировку для отправки запросов с формами, что позволит облегчить задачу разработки и поддержки многоязычных приложений. В ядре Ext.core появились новые свойства для идентификации различных платформ и движков браузеров (Gesko 2 и 3), мелкие исправления в отображении виджетов на платформе Mac, исправления в работе с массивами, улучшена работа с событиями, в частности переработана процедура регистрации обработчиков для борьбы с утечками памяти, некоторые изменения для поддержки будущих версий Internet Explorera.

В компонентах для работы с данными исправлена ошибка с определением флага модификации для изменённых записей в Record-е, в компоненте для работы с деревьями появилось свойство для определения развёрнутости узла дерева. Множество исправлений в классе для работы с датами.

В части работы с виджетами есть некоторые изменения в базовом компоненте Ext.Components, направленные на улучшение взаимодействия с плагинами и расширениями, множественные улучшения в компоненте визуального выбора даты DatePicker. Визуальный редактор текста теперь корректно работает со скроллингом в браузерах Firefox 2 и Opera. Очень радует появление новых событий и обработчиков в компоненте постраничного вывода данных Ext.PagingToolbar — теперь можно обрабатывать перемещение по страницам, чего раньше, честно говоря, реально не хватало. Компонент динамических подсказок теперь корректно отображается в IE 7. В компоненте Datefield для работы с датами в формах теперь можно задавать как минимальную так и максимальную даты диапазона выбора, а также указать запрещённые для выбора даты. Радуют заявления разработчиков, что оптимизирован код отображения таблиц и он теперь явно быстрее — часто это самый нужный и самый мощный компонент, и он используется там, где есть много данных, поэтому скорость для него очень важна.

Если же просуммировать все изменения, то в основном они направлены на улучшения работы с полосами прокрутки в разных браузерах, изменения в работе с событиями и предотвращения утечек памяти, а также многочисленные изменения для улучшения работы в IE и Firefox на платформе Mac. Также много изменений во всех компонентах, связанных с датами.

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

Страница загрузки исходного кода (SDK) и документации

Страница с примерами

P.S. Оригинал материала в моем блоге Alpha-Beta-Release Blog
Tags:
Hubs:
+27
Comments 42
Comments Comments 42

Articles