Библиотека ExtJS/Sencha *

Предисловие

Sencha Touch (ST) – библиотека для разработки веб-сайтов и веб-сервисов, ориентированная на iPhone, iPad и Android. Разработана она компанией Sencha, Inc – известным поставщиком библиотеки ExtJS для рынка высокотехнологичных браузерных интерфейсов.

Основная цель ST – по мере возможности мимикрировать стандартный интерфейс и поведение элементов интерфейса iOS, предоставив программистам гибкое API.

Ядро библиотеки написанно на JavaScript, CSS3 и html5 (в трактовке WebKit-движков). FireFox 4 и IE 9 отсутствуют в списке поддерживаемых браузеров.

Соответственно, ST-приложение – это обычная клиент-серверная разработка, в качестве клиента выступает браузер Safari или Chrome, а в качестве сервера – любой веб-сервис, способный «отвечать» в форматах JSON, XML и еще нескольких других.

Доброе утро.
По ходу разработки очередного проекта понадобился простой плагин для стандартного редактора Ext.form.HtmlEditor, который бы добавлял изображения в текст. Собственно его и пришлось сделать. Очередной велосипед, но может быть пригодится ещё кому-нибудь.

Сразу скажу, что функционал минимальный, по крайней мере пока. Есть возможность просмотра изображений, вставки в текст сразу нескольких из списка. Можно указать адрес, если оно уже где-то есть. Ну и размеры с названием.
Сам плагин можно забрать на гуглокоде.

Создатели прекрасного фреймворка Ext JS/Sencha на одной из конференций посвященной Ext JS анонсировали выход 4-й версии. Эта статья является вольным переводом поста из блога разработчиков. В новой версии, очень много изменений, которые не оставят равнодушными разработчиков. Ждем публичной беты.

Ext.Helper.TabWindow

Выкладываю расширение (пока карма позволяет, спасибо плюсанувшим) Ext.Window -> Ext.Helper.TabWindow, которое вполне себе может сворачиваться в TabPanel ну и соответственно разворачиваться обратно в окно.

Пока компания Adobe анонсирует Edge prototype tool, компания Sencha выпускает пробный релиз Sencha Animator — декстопное приложение для создание анимации для всего, что поддерживает HTML5. Как утверждают создатели, создание такого инструмента вызвано заявлением Apple исключить Flash из их iOS, что приводит к тому, что приходится писать кучу строк кода для создания анимации через CSS3. Поэтому они предлагают для начала посмотреть демо, а потом скачать и воспользоваться аниматором самому.

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

Вместо предисловия

Давно хотел опубликовать что-то полезное и вот, наконец, решил рассказать об Ext.Direct. Не видел ни одной более-менее обширной статьи на русском по данной теме, то ли это никому не нужно, то ли одно из двух, как бы то ни было начнем.

Что из себя представляет Ext.Direct?

Ext.Direct существует начиная с версии extjs 3.0. Это пакет который позволяет осуществить более тесное взаимодействие между сервером и клиентом. Вспоминая версию 2.0+ понимаю как же мне не хватало «директа».

Client Side

Возможности Ext.Direct реализованы в классах пакета Ext.data (DirectStore, DirectProxy), соответственно DirectStore в качестве ридера использует JsonReader. Так же существует пакет Ext.direct, в частности класс PollingProvider реализует переодический опрос сервера с заданным интервалом. Ну и Ext.Direct, о нем вскользь ниже и Ext.Direct.Transaction, вспомогательный класс, который напрямую не вызывается.

Официальный сайт ExtJS говорит:
"Чудесные чудеса творятся! Сегодня мы объединяем свои усилия с проектами jQTouch и Raphaël и меняем имя нашей компании на Sencha. А так же переезжаем с адреса www.extjs.com на www.sencha.com."


Такие вот пироги! Сайт и твиттер уже живут по новым адресам.

Пару слов о том, что такое JQtouch: это jQuery плагин для разработки под мобильные девайсы типа АйФона, АйПода и прочие «forward-thinking» девайсы.

Что же такое Raphaël? А это крутая штука для разработки векторной графики под веб (см. демки по ссылке).

Ууух, ядреный коктейльчик должен получиться! :)

Добрый день.
Хочу поделиться ExtJS плагином Ext.ux.HistoryTree — дерево с историей:
— для всех переходов по дереву (раскрытие/скрытие ветки, выделение ветки) работают кнопки Назад/Вперед;
— в URL браузера всегда прямая ссылка на текущее состояние дерева.

Demo и API

Совместимость:
— IE6+ (с определенными ограничениями), FF, Opera, Safari, Chrome;
— ExtJS версии 2.3.0, 3.2.1 (это все версии, что я тестировала).

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

Буду рада замечаниям и предложениям по работе плагина.

Не так давно я писал о плагине позволяющем разместить панель внутри таблицы. Плагин очень интресный и не съедающий огромное колличество ресурсов, но с небольшим недостатком. Он не может нормально работать с EditorGridPanel.
Так вот, я спрашивал тут помощи, но как-то никто не отозвался, так что я еще полазал по форумам, затем нашел разработчика и т.д. В общем решение было найдено и под катом собственно ответ на вопрос — как заставить RowPanelExpander работать с EditorGridPanel?

Добрый день, уважаемые хабравчане. Продолжая тему о создании custom-компонентов, мы с Вами сегодня поговорим о наследовании свойств-объектов и о правильном использовании обработчиков событий.

Тестируем свеженький ExtDesigner за более 200 не русских президентов на предмет вменяемости и вообще что это такое и для чего
Сразу скажу что ExtJS ом пользоваться не умею, но прочитанные доки оставили довольно приятное впечатление
тестировать буду на Gentoo Linux 64х битную сборку

Автор книги ExtJs in Action Jesus Garcia представлят очень подробный 49-минутный скринкаст с большим количеством наглядных схем, записанный за 20 часов материала, которые он представит позже

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

В дополнение статей oddy про архитектуру RIA-приложений на основе ExtJS хочу предложить свой, альтернативный подход к данной проблеме. Он состоит в использовании ZendFramework-подобного каркаса xFrame, написанного на JavaScript. Под катом — описание ключевых элементов системы, ссылки на демо приложение и исходный код.

Привет всем! Во-первых всех хочу поздравить с Рождеством! Счастья всем и здоровья!
Во-вторых, хочу сообщить тем, кому интересно, что я разместил на своем сайте еще один урок по ExtJS, в котором мы попытаемся разобраться с шаблонами элементов.
Вообще сразу хотел бы отметить следующий факт: с прошлым постом получилась одна маленькая неприятность — много хабрапипл меня пытались убедить в том, что я творю Зло, что занижаю порог вхождения в сакральные технологии и оказываю медвежью услугу тем, кто в результате изучения моих корявых уроков напрочь теряет шанс стать нормальным кодером. В связи с этим хочу сразу определить несколько моментов:
1) Я вполне допускаю что высказалось немало действительно хороших специалистов в этой области, тем не менее прошу вас впредь не тратить свое время на подобные убеждения, ибо во-первых, с вами я не согласен, а во-вторых, выложите более адекватные уроки и нужность моих кривых уроков сразу пропадет сама собой.
2) Я еще раз повторюсь, что на звание авторитетной мануалы мои уроки не претендуют. Для меня программирование — хобби, и познания у меня больше дилетанские, и видение такое же, потому лексикон и примеры соответствующие. Но вполне возможно именно по-этому их понять начинающему легче, чем сразу с головой окунаться в изучение официальной доки на буржуйском языке. Потому, если у вас глубокие познания в программировании, вы вряд ли найдете что-то новое в моем материале, разве что захотите налить грязи и показать насколько вы крутой кодер на фоне остальных неучей. Не надо! Мы итак это знаем. Потому не флудьте почем зря. Здесь материал для начинающих и тех, для кого кодинг — хобби.

Хотел бы начать знакомить всех с фреймворком ExtJS. Оказывается, все не так сложно как может показаться…

1. [ExtJS] :: Часть 1. Вводная. Модель DOM и типы данных в ExtJS
2. [ExtJS] :: Часть 2. Основы пользовательского интерфейса в ExtJS
3. [ExtJS] :: Часть 3. Загрузка, проверка и обработка форм в ExtJS
4. [ExtJS] :: Часть 4. Работа с выпадающими списками и календарем
5. [ExtJS] :: Часть 5. Отображение и редактирование табличных дан
6. [ExtJS] :: Часть 6. Обзор таблиц и списков
7. [ExtJS] :: Часть 7. Вкладки и деревья

Ссылка на ресурс тут

Пока все.

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

PS. С НАСТУПАЮЩИМ!!!

Наткнулся на днях на интересный пример, как сделать Ext.Grid из неотформатированной таблички. Делается все буквально одной строчкой. Для начала создадим HTML таблицу:

Введение

Суть проблемы, рассматриваемой в данной статье заключается в том, что Grid объекты библиотеки ExtJS не предназначены для использования в контексте вложенности. В общем случае, такая задача редко становится перед разработчиком. И все же, иногда, как, например, в моем случае, с ней приходится сталкиваться. Ниже я попытаюсь поделиться накопленным опытом, и, возможно, окажу тем самым кому-нибудь неоценимую помощь, на что искренне надеюсь :). Итак, в добрый путь…

MyCalendar — это расширенная версия стандартного ExtJS-календаря. Календарик не привязан к конкретному бэкэнду т.к. работает только с JSON данными, а их хоть из ассемблера кидай =). На сайте автора уже представлено два бэкэнда на Grails и PHP в качестве демо для лучшего понимания внутреннего устройства.

Протестировано в IE, FF, Chrome.
Товарисчь anotherpit подсказывает, что в Opera все тоже работает (на первый взгляд).