Использование Ext JS 4 виджетов в рамках Ext JS 3 интерфейса

Ext JS 4 представляет разработчикам много новых возможностей, в числе которых, например, большое количество новых графиков и диаграмм. Сравните - для четвертой версии приведено 22 примера использования элементов Chart против всего четырех примеров для третьей версии. Внушающе, не правда ли?

Однако что, если в наличии есть большое приложение, реализованное на третьей версии Ext JS и возникает необходимость использования некоторых виджетов четвертой версии? Например, типична ситуация, когда в приложение нужно добавить новые диаграммы, но переписывать всё на "четверку" нецелесообразно.

ExtJS проблемы в Internet Explorer

ExtJS, как гласит официальный сайт, является кроссплатформенным фреймворком для построения Rich Internet Application - "богатых интернет приложений", то есть, приложений, обладающих функциональностью обычных настольных программ. И это действительно так.

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

Нередко наблюдается, когда интерфейс отлично функционирует в Firefox, но даже не отрисовывается в Internet Explorer и браузер выдает многочисленные сообщения об ошибках.
Как правило, причина такого поведения заключается в разной реализации массивов Javascript. Известно, что в ExtJS для конфигурирования элементов используются исключительно объекты и массивы объектов, например:

vp = new Ext.Viewport({
    layout: 'border',
    renderTo: Ext.getBody(),
    items: [
        firstElement,
        secondElement,
        thirdElement
    ]
});

Здесь создается Viewport, элементами которого являются firstElement, secondElement и thirdElement - и этот код будет работать одинаково во всех заявленных разработчиками ExtJS реализациях браузеров. Однако, попробуйте выполнить этот код:

vp = new Ext.Viewport({
    layout: 'border',
    renderTo: Ext.getBody(),
    items: [
        firstElement,
        secondElement,
        thirdElement, // запятая
    ]
});

Internet Explorer выдаст ошибку. Проблема в реализации массивов Javascript: если после последнего элемента стоит запятая, IE считает, что в конце массива присутствует еще один, пустой, элемент. ExtJS пытается обработать этот элемент, но, так как он фактически пуст, генерируется ошибка.

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

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

Вторая проблема - использование в коде конструкции console.log() для вывода сообщений в консоль Firebug или Chrome. Internet Explorer, к сожалению, не имеет консоли как таковой, поэтому попытки ее использования генерируют ошибку; необходимо помнить, что после окончания тестирования и отладки интерфейса, если вы использовали вывод сообщений в консоль, их необходимо удалить или закомментировать. Впрочем, эта ошибка, в отличие от вышеописанной, легко определяется.

Рекомендации начинающим изучение Ext JS

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

Зачем

Ext JS позволяет писать сложные интерфейсы по-настоящему быстро, полностью соответствуя концепции RAD - Rapid Application Development. Не нужно заниматься html и css кодированием для разработки по-настоящему богатых функциональных интерфейсов, выполненных в едином стиле, вместо этого вы пишете несложный javascript код, выполняющий всю работу за вас.

Команда Ext JS создала целую коллекцию примеров (для 3й версии Ext JS) для ознакомления с основными возможностями фреймворка. Посмотрите, какие изящные конструкции вы сможете создавать минимальным количеством JS кода! Абсолютно все конфигурируется под себя, каждый элемент обладает огромным количеством событий (events), позволяющих реагировать на различные действия со стороны пользователя. Разработчикам удалось создать действительно очень и очень гибкий инструмент для построения классых веб интерфейсов.

Возможно, вы уже работали с некоторыми javascript фреймворками, например, JQuery или Prototype и уже используете их в своих проектах. Ext JS спроектирован таким образом, чтобы обеспечить возможность корректной работы и с другими фреймворками, таким образом, вы можете абсолютно спокойно оставить ваши наработки на JQuery и начать внедрять элементы Ext JS. Дело в том, что Ext JS осуществляет работу с DOM (Document Object Model, объектная модель документа) посредством так называемых адаптеров, причем в комплекте поставки уже есть 4 адаптера - родной ext, jquery, prototype и yui. Другими словами, фреймворк может использовать разные библиотеки для выборки элементов страницы, поэтому можно не беспокоться о совместимости и при желании продолжать пользоваться параллельно другим знакомым фреймворком.

С чего начать

Начать, пожалуй, следует с некоторых вводных статей о Ext JS. Для русскоязычного пользователя отличным вступлением может послужить небольшой цикл статей от techwork.ru. Обратите внимание, что в статьях описана третья версия, однако, прочитав этот материал, вы уже будете иметь общее представление о фреймворке и работе с ним.

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

Отличная книга - Learning Ext JS 3.2 (вот). В сети есть pdf в отличном качестве, который можно распечатать, почитать на мониторе/iPad'е/электронной книге.

В настоящий момент я пишу книгу Ext JS 4: разработка Rich Internet Applications на русском языке.

Разработчику

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

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

Официальные Tutorials (руководства) также являются зачастую хорошим источником для восполнения недостающих знаний.

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