ExtJS 5 приносит несколько восхитительных улучшений архитектуры: мы добавили поддержку ViewModel'ей, MVVM, а также ViewController'ов для усовершенствования MVC-приложений. Что самое приятное — эти функции не взаимоисключающие, так что вы можете вводить их шаг за шагом или использовать одновременно.

Фреймворк Sencha Ext JS стал индустриальным стандартом для разработки корпоративных веб-приложений благодаря обширной библиотеке виджетов, мощной поддержке работы с данными и богатым набором инструментов разработки. Со дня релиза Ext JS 1.0 в 2007 году в нашей отрасли многое изменилось, а веб-приложения несомненно стали больше и сложнее, чем когда-либо ранее.

Если вы пишете веб-приложения на ExtJS в связке с ASP.NET MVC и хотите минифицировать исходные файлы, но по каким-то причинам вам не нравится использовать для этого стандартный SenchaCmd, добро пожаловать под кат. Для тех, у кого нет времени и уже хочется попробовать, в конце статьи есть ссылки на библиотеку, а пока попробуем разобраться, в чём проблема и написать такой минификатор самостоятельно.

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

Приветствую хабражителей. Я бы хотел рассказать о своем расширении и попросить небольшой помощи.
Называется расширение Total bookmarks, т.к. его интерфейс почти полностью позаимствован у Total commander'а.

Здесь будет рассказано как запустить тесты Siesta из консоли не используя платную (стандартную) версию продукта (которая стоит 499$).

Проблема

Дело в том, что бесплатная (лайт) версия инструмента Siesta позволяет запускать тесты только из браузера. А если вам понадобиться запускать тесты для CI из консоли, то придется обратить свой взор на стандартную версию, которая имеет много вкусностей, в том числе и запуск из консоли. Сам инструмент использует широко известный бесплатный движок PhantomJS для запуска своих тестов.

Решение

Изучив документацию PhantomJS, Siesta и готовые примеры для запуска тестов Jasmine и QUnit, мною было написано немного кода, позволяющего сэкономить наши с вами деньги.

Зачем

Есть у меня несколько проектов на Java использующих в виде web-клиента ExtJs приложения. Библиотека прямо скажем не маленькая. Полный архив более 60M мегабайт весит, и приложениям находящимся в активной разработке приходится все это тащить и скачивать из CVS. А если к последнему добавить медленный интернет, то все становится совсем грустно. В приложение еще и десятка классов нет, а вес уже за полсотни мегабайт.

Есть три вещи, которые можно делать бесконечно:
1. Наблюдать, как горит огонь
2. Наблюдать, как бежит вода
3. И наблюдать, как кто-то работает

В нашем случае, наблюдать за тем, как крутятся наши over 9000 тестов. Особенно красиво смотрятся Selenium тесты. Выглядит, как будто бешеный тушканчик с вечным двигателем внутри сел тестировать систему.

Не знаю как вас, но меня это затягивает:


Остаток статьи я расскажу маленькую success-story о том, как мы организовали наше тестирование на Selenium

Все привет.

Была у меня недавно такая задачка. Мне надо было сделать небольшое веб-приложение, которое должно было помочь работе врача. Use-Casе‘ов там не много, посмотреть кто сегодня записан на прием, возможность посмотреть историю болезни, занести новые данные и создать нового пациента. Делов то…

Времени у меня было много, спешить некуда. Сначала подумал спрограмить по быстрому на GWT + SmartGWT, но подумалось мне, что пора бы что нибудь новое посмотреть. К тому же были явные намеки, что появятся мелкие заказы подобного рода, для библиотек там всяких и мелких фирмочек. Хотелось нечто простое с одной стороны, но в тоже время достаточно мощное.

Это обновленная версия устаревшего поста.

Этот пост покажет вам простые шаги по созданию менеджера задач TODO с использованием Ext JS, Ruby on Rails и Netzke. Это займет у вас приблизительно 7 минут, и если вам заранее любопытно, стоит ли оно того, загляните прямиком в секцию «Обсуждаем результаты» (кстати, самую большую). Наша цель заключается в создании веб-приложения которое позволит нам добавлять, редактировать и удалять задачи TODO, так же как и помечать их как завершенные. В дополнение к этому вы сможете сортировать задачи, делать поиск по ним, редактировать несколько задач одновременно — и это еще не все. Если хотите, засекайте время на секундомере — и давайте приступим.

Вот JavaScript-овый объект, сериализованный в JSon:

var source1 = '[{"vConfig":{"vType":"objectview","serverItemType":"TrackerObject"}}]';

А вот ещё один JavaScript-овый объект, тоже сериализованный в JSon:

var source2 = '[{"vConfig":{"serverItemType":"TrackerObject","vType":"objectview"}}]';

У них одинаковая структура, одинаковые параметры, одинаковые значения в этих параметрах. По всем признакам, и в source1, и в source2 у нас одно и то же.

Но интерпретатор JavaScript с нами, разумеется, не согласен. И он вполне резонно считает, что source1 и source2 — разные строки. А если мы десериализуем их обратно, то получим два object-а, которые расположены по различным адресам памяти и… тоже не равны друг другу.

А если вы, впридачу, работает с Ext.js, щедро генерируете свои классы и не забываете про jSon, то может дойти до полного затмения. Как сравнить эти огромные простыни сведений о контролах, которые собираются в JSon-ы? Или разобраться древовидными объектами, где в каждое поле уже успели насоздаваться ещё какие-то подполя?

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

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

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

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

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

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

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

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

Пример использования: http://siterra.org/examples/rowtoolbar.html
Репозиторий: https://github.com/siterra/RowToolbar
Тестировался с ExtJS 4.1.1a.

Предисловие

Сразу хочу попросить прощения за столь перегруженную статью, но для меня сейчас всё это актуально и связано. Думаю что некоторым это может пригодиться для будущей разработки. Хочу обратить внимание, что в этой статье я не стану рассказывать вам как устанавливать те или иные тривиальные вещи, установка которых, к тому же, зависит от той или иной платформы. Также в статье я не описываю телодвижения по настройке прав доступа к файлам сервера, опять же, это зависит от реализации. В статье описан процесс настройки на PDC сервер с именем tci.lan, все имена сохранены, в вашем случае их следует заменить на соответствующие вам. Данная статья содержит код, для улучшения читаемости он спрятан в спойлерах.

Если вам нужно валидировать загружаемые пользователем файлы не только на сервере, но и на клиенте, или вы хотите позволить пользователю выбрать сразу несколько файлов для загрузки (multiple=”multiple”) то, скорее всего, вы столкнетесь с некоторыми трудностями при использовании Ext.form.field.File.

Суть проблемы

Проверить расширение загружаемого файла, если пользователь выбрал только один файл, не составит труда — просто объявляем vtype и смотрим value input-а:

Ext.apply(Ext.form.field.VTypes, {
    file: function(val, field) {
        var types = ['rtf', 'pdf', 'doc'],
            ext = val.substring(val.lastIndexOf('.') + 1);
        if(Ext.Array.indexOf(types, ext) === -1) {
            return false;
        }
        return true;
    }
    ,fileText: 'Invalid file'
});

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

PhantomJS — это сборка движка WebKit без графического интерфейса, позволяющая в режиме консоли загружать веб-страницу, выполнять JavaScript, полноценно работать с DOM, Canvas и SVG. Одним из главных заявленных применений PhantomJS является автоматизированное функциональное тестирование пользовательского интерфейса. PhantomJS имеет интеграцию с различными фреймворками для тестирования JavaScript и веб-страниц. Посмотрим, что можно сделать на базе стандартного функционала PhantomJS, чтобы протестировать отдельный компонент и целое приложение, написанное на ExtJS/Sencha. В этой статье я приведу некоторую простейшую заготовку для тестировочного фреймворка, иллюстрирующую подход к тестированию кода, основанного на сторонней JavaScript-библиотеке. Весь код, представленный в статье, доступен на GitHub.

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

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

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

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