В статье рассматриваются концепты создания IDE и дизайнера интерфейсов с использованием ExtJS и PHP. С одной стороны, создание подобных редакторов довольно редкая задача, с другой — концепты и приемы можно использовать для создания различных визуальных конфигураторов.


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

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

Беглый поиск выдал Ext Designer (Sencha Architect) — интересный и полезный инструмент (Ext MVC еще не существовало). Ext Designer так и не помог решить поставленные задачи, но обо всем поподробнее.

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

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

Далее следуют мои впечатления от работы на ExtJS 4.1.1. Они по определению субъективны и не претендуют на вселенские обобщения.

Добрый день, уважаемые хабрапользователи.

С недавних пор я занимаюсь разработкой на Ext JS 4 и Zend framework 2.

Пользуясь случаем, хотелось бы создать небольшую серию статей, «на пальцах» освещаюшую некоторые основные компоненты Ext JS 4, без которых не обойдется ни одно приложение на Ext JS (простите, серия,- громко сказано,- пишу из песочницы).

Итак, Grid, часть 1.

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

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

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

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

Используя 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… Ну и немного о самой соц. сети… совсем немного.

Это первый видео урок по 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), обновлена и значительно расширена документация. Изменения коснулись также системы классов и работы с данными, причем весьма значительно.
Также уже добавлены новые примеры, которые можно посмотреть в соответствующем разделе.

Создатели прекрасного фреймворка 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. Поэтому они предлагают для начала посмотреть демо, а потом скачать и воспользоваться аниматором самому.

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

Давно хотел опубликовать что-то полезное и вот, наконец, решил рассказать об 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 (это все версии, что я тестировала).

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

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

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

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

AeroSQL – open source (GPLv3) web based инструмент для управления базами данных на сервере MySQL с использованием PHP и ExtJS 2.2.1. Ключевая особенность этого продукта в том, что имеет интуитивно понятный интерфейс для доступа к данным таблиц БД. Результаты выборки отображаются в виде таблиц. Таблицы являются редактируемыми: вы можете редактировать ячейки и сохранять изменения прямо на сервере. Скриншоты и видео под катом.