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

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

Описанная схема имеет все недостатки толстого клиента. Это и необходимость разработки отдельного приложения для работы из браузеров (что в современном мире является нормальным требованием), и необходимость установки дополнительного ПО, и проблема его обновления, и вообще необходимость найма специалистов по разработке десктоп приложений. Согласитесь, нам, как веб разработчикам, проблема работы офлайн всегда была костью в горле.

Сегодня этот вопрос решается элегантно — с помощью HTML5 с его локальным хранилищем (local storage), Ext JS 4 с возможностью прозрачно работать с этим хранилищем, и HTML5 кэшем приложений (Application Cache). Совокупность этих технологий позволяет реализовать следующую схему: при наличии сети статичные файлы (HTML/CSS/JS код и картинки) загружаются с сайта и мы работаем с серверной централизованной базой данных, при отсутствии сети статика загружается из Application Cache и мы работаем с локальным хранилищем, которое сохраняется в серверную БД при появлении доступа к Интернет. При этом без активного подключения по URL адресу страницы браузер отображает не ошибку доступа к сети, а функциональную систему, работающую с локальным хранилищем. Пояснения и рабочий пример (да не упадет мой vds под хаброэффектом) — под катом. Статья получилась немаленькая, но, надеюсь, весьма содержательная.

Думаю, каждый, кто писал WEB-приложение с активным использованием JavaScript на стороне клиента, сталкивался с проблемой десятичного разделителя. И решение этой проблемы отнюдь нетривиально, как может показаться на первый взгляд. В ExtJS использован простой в реализации и управлении подход: числовому полю указывается символ, который считается разделителем, и ввод других символов, исключая цифры и "-", запрещен. Однако этот подход, как мне кажется, имеет один существенный недостаток: когда используется несколько раскладок десятичный разделитель на цифровой клавиатуре соответствует разным символам. Как это исправить описано ниже.

Проблема взаимопонимания

Представьте себе ситуацию: вы — фрилансер и работаете с Ext. С вами удалённо работает один (или несколько) разработчиков back-end. Работа идёт быстро и гладко. Но вот вот случилось так, что разработчик серверной части сменился. Если у нового коллеги есть опыт взаимодействия с Ext — всё замечательно. Но вот если человек впервые будет писать back-end для Ext или впервые будет писать для веба (такое тоже случается), то вам будет необходимо найти общий язык.
И вот тут могут начаться проблемы…
Придётся тратить время на простое объяснение протокола, объяснения как должен реагировать сервер на те или иные запросы. Чтобы избежать этого, я подготовил документ, описывающий все (ну или почти все нюансы стандартного для Ext протокола). Этот документ и представлен под катом.

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

Несмотря на то, что четвертая версия каркаса ExtJS вышла уже достаточно давно, материалов по этой версии на хабре не слишком много. А если учесть, что в четвертой версии существенно переработан API, структура классов и предлагаемая архитектура приложения, то, как мне кажется, тут есть, о чем поговорить.

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

Эта статья — перевод статьи из блога www.swarmonline.com с небольшими моими дополнениями

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

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

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

Добрый день, хабрапользователи! Сегодня я бы хотел поделиться с проблемами, которые обычно отталкивают добропорядочных программистов от использования фреймворка — Ext JS. Опишу конкретную ситуацию: в один прекрасный день после некоторого времени потраченного на просмотр возможностей, которые предлагает Ext JS, возникает непреодолимое желание попробовать его «в деле». Качается дистрибутив, ставится на локальный сервер и запускаются красивые примеры гридов, форм и, даже, готового рабочего стола! Разработчик меняет пару «фишечек», все вроде легко и просто. Резонно в голове бой-скаута возникает идея сделать некий коммерческий проект на Ext JS (чаще всего это бывают различного рода CMS, админки, CRM). И тут начинается самое интересное…

Постоянно меняющиеся требования и сжатые сроки подтолкнули нас к использованию ExtJS 4 для создания прототипа.

Проблемы в ExtJS, с которыми мы столкнулись при разработке, едва ли превысили опыт, который мы получили при препарировании ExtJS.

В интернете много статей про ExtJS 4 уровня basic. Например очень порадовала эта статья http://css.dzone.com/articles/how-use-extjs-4-jquery. А вот серьезных “не кассовых” статей по решению (или созданию) каких-то проблем с помощью ExtJS не много.

Предлагаю вашему внимаю первую статью в рамках ExtJS patch lab… Ну и немного о самой соц. сети… совсем немного.

Преамбула

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

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

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

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

Недавно встал вопрос о хотя бы частичной миграции функционала в веб. Как средство разработки была выбрана платформа GWT. Выбор обусловлен тем, что наиболее привычной технологией для себя считаю Java. Также очень хотелось попробовать какую-нибудь новую для меня современную платформу разработки.

Третий видеоурок по Sencha Touch:



Темы:

• работа с событиями;
• ещё раз о this и scope;
• Ext.Carousel;
• свойство контейнеров defaults

Исходный код урока можно взять здесь.

Ссылки на остальные уроки: 1, 2, 3

Хочу поделиться одной интересной находкой, откопанной среди плагинов Firefox-а. Называется этот плагин Illuminations for Developers for Firebug и представляет из себя дополнение к Firebug для работы с тяжеловесными JS либами, преимущественно с ExtJS и Sencha Touch. Помимо этого, создателями заявлено, что в beta-версии плагин поддерживает Dojo Toolkit, SproutCore, qooxdoo, YUI, Google Closure Library, jQuery UI.

Вот и второй видеоурок по Sencha Touch:



Темы:

• размещение компонентов на Ext.Panel

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

Ссылки на остальные уроки: 1, 2, 3

Это первый видео урок по JavaScript-фреймворку Sencha Touch.



В этом скринкасте я разобрал следующие темы:

• азы создания веб-приложений на базе библиотеки Sencha Touch;
• компоненты Ext.Panel, Ext.Toolbar, Ext.Button и некоторые из их конфигурационных свойств;
• порядок применения значений свойствам компонента

Исходный код урока можно взять отсюда.

Ссылки на остальные уроки: 1, 2, 3

Дополнительную информацию о разработке под мобильные платформы можно найти в моём блоге.

Радостная новость — сегодня вышла новая версия замечательного фреймворка.
Не могу опубликовать топик-ссылку, поэтому решил поделиться таким образом.
Прочесть краткий обзор и скачать библиотеку можно здесь: http://www.sencha.com/products/extjs/
Среди новшеств — песочница для запуска нескольких версий Ext JS в одном приложении, уменьшенный размер скриптов (от 100 кб), необходимый для работы, улучшения вида графиков и форм, системы раскладок (layouts), новые возможности для таблиц (grids), обновлена и значительно расширена документация. Изменения коснулись также системы классов и работы с данными, причем весьма значительно.
Также уже добавлены новые примеры, которые можно посмотреть в соответствующем разделе.

Только что, посетив сайт sencha.com в поисках справки, был приятно удивлён великолепной новостью: доступен для скачивания Developer Preview 1 ExtJs 4. Все Мы уже видели множество вводных статей на Хабре по четвёртой версии этого фреймворка, а теперь получили возможность его пощупать. Качайте, пробуйте и пишите новые интересные обзоры, удачи.

От переводчика: Вашему вниманию предлагается вторая статья из цикла «В ожидании Ext JS 4». В предыдущей статье разработчики Ext JS рассказывали о новой системе классов.

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

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

От переводчика: Sencha Inc, производитель известного RIA-фреймворка Ext JS, заговорила о грядущей четвертой версии 22 ноября прошлого года. Релиз обещанного планировался на 28 февраля.

Что бы подогреть интерес комьюнити (ведь API, по словам разработчиков, изменилось значительно), была обещана публичная альфа- или бета-версия «в течении пары недель». Прошло два месяца, но обещанного пока нет.

Понимая, что была совершена маркетинговая ошибка – слишком рано заявили о новом продукте и сорвали сроки его презентации – разработчики решили немного схитрить, выкладывая обещанную «бету» по частям: пакет за пакетом.

Вашему вниманию предлагается перевод первой статьи из официального блога фреймворка, посвященной попытке эмуляции «взрослого» ООП средствами JavaScript в реализации Ext JS 4.

Статья, в первую очередь, будет интересна тем, кто уже пользовался предыдущими версиями фреймворка – автор рассчитывает на то, что читатель уже знаком с архитектурой Ext JS.

Проблема

ExtJS — прекрасная библиотека с огромным числом возможностей. На http://dev.sencha.com/deploy/dev/examples/ можно найти множество демонстрационных исходных кодов, доступных для использования в реальных проектах, однако, конечно, ответа на все вопросы это не даст.
Мне было необходимо сделать обоюдное перетаскивание между TreePanel и GridPanel. Найдя на форуме ExtJS и в интернете вообще лишь отрывочные сведения, я решил написать это самостоятельно. Как это у меня получилось — под катом.

Предисловие

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 и еще нескольких других.