Очередное обновление 5.1

Создал новый проект на базе ExtJs 5.1. Сейчас эта версия доступна под лицензией GPL:
http://www.sencha.com/products/extjs/download/ext-js-5.1.0/3301

Созданное при помощи Sencha Cmd приложение не работало. Выяснил, что нужно также обновить Sencha Cmd до версии 5.1. У меня на работе выход в интернет через прокси, поэтому я не стал пользоваться sencha upgrade, а просто загрузил установщик с сайта sencha.com и установил на локальный диск (про локальный диск некоторым кажется, что это очевидно, но у нас тут особая среда). Потом удалил старый экзешник из переменной окружения Path и переоткрыл терминалы. После таких манипуляций команда
sencha -sdk "path/to/extjs/5.1" generate app -ext MyApp "path/to/target/folder/for/my/application"
отработала правильно и в браузере ошибки исчезли.

Однако...
Однако есть у меня сейчас в работе другое приложение, которое основано на версии ExtJs 5.0. Как вы понимаете, обновление Sencha Cmd до версии 5.1 потянуло за собой обновление SDK и здесь. Можно было бы, наверное, использовать обе версии Sencha Cmd одновременно, но я посчитал, что жизнь и без того довольно сложная и запутанная штука. В общем я скопировал папку app и файлы index.html, app.js и app.json. Всё снёс. Развернул дефолтное приложение той же командой sencha generate app и вернул на место старый код. Сразу не заработало. Но после sencha app build и переназвания Ext.MessageBox в Ext.window.MessageBox всё встало на свои места. Я доволен. Календарь стал нормально работать.

Обновляем Sencha Cmd

Утилита Sencha Cmd время от времени выходит в новой версии. Пора обновится.
Описание команды sencha upgrade есть в документации:
http://docs.sencha.com/cmd/5.x/advanced_cmd/cmd_reference.html#sencha_upgrade

Перешёл в командной строке в директорию с файлом sencha.exe. Запустил sencha upgrade. Со второго раза всё заработало. Открылось окошко установщика и дальше по прошёл по кнопкам как по нотам.

С первого раза не получилось из-за того, что не было доступа в интернет. Настроил прокси, как советуют на форуме:
http://www.sencha.com/forum/showthread.php?259532-Upgrading-Sencha-Cmd-behind-proxy

Менял файл sencha.cfg, который лежит вместе с файлом sencha.exe.  Устаревший способ не сработал:

# system.java.net.useSystemProxies=true

# These are the legacy options that come in to play when the above is commented
# out:
system.http.proxyHost=***local.ru
system.http.proxyPort=3128
system.http.proxyUser=novikov
system.http.proxyPassword=*****

Зато второй способ оказался вполне пригодным. Вставил в том же файле:

#cmd.jvm.args=-Xms128m -Xmx1024m -Djava.awt.headless=true
cmd.jvm.args=-Xms1024m -Xmx2048m -Djava.awt.headless=true -Dhttp.proxyHost=***local.ru -Dhttp.proxyPort=3128 -Dhttp.proxyUser=novikov -Dhttp.proxyPassword=*****

Обновился с версии  4.0.2 до 5.0.1

ViewController: первые шаги

Как известно, в ExtJs 5 помимо обычных MVC-контроллеров, появился новый тип контроллеров - ViewController. О нём и поведу речь. Но сначала два слова о старых контроллерах.

Старые контроллеры могли существовать только в одном экземпляре. Из них было удобно управлять представлением (таблицей, диаграммой, шаблоном и т.д.), которое также существует в единственном экземпляре. Подсовывая в такое представление разные наборы данных, загружаемых с сервера, создавали впечатление что представлений много. Такой подход значительно сокращал количество элементов в DOM. Однако в том случае, когда на экране нужно одновременно отобразить несколько экземпляров представления, работа с контроллером несколько усложнялась, поскольку теперь нужно управлять коллекцией представлений. Инструменты, предоставляемые контроллером не были приспособлены для управления коллекциями. Вспомните, например, refs и автоматически генерируемые методы...

И вот на сцену выходят "контроллеры представления". Под каждый новый экземпляр графического представления создаётся отдельный экземпляр контроллера. При уничтожении представления уничтожается и его персональный контроллер. Нововведение значительно оздоровило создаваемый код. В новые контроллеры пишем то, что писали раньше при определении listeners представления. То есть, код представления всё больше становится похожим на конфигурационный объект, практически лишённый определений функций. Все функции перекочевали в новые контроллеры.

Чтобы контроллеры у вас заработали нужно помнить несколько простых правил:

1. добавьте полное имя класса контроллера в Application.js в параметр "views". Это не опечатка, не в параметр "controllers". В параметр "controllers" будете вносить классы старого типа контроллеров, которые по-прежнему можно создавать.
2. внесите в тот же раздел Application.js полное имя класса представления, чтобы оно подгружалось и ещё чтобы оно попадало в сборку, создаваемую через "sencha app build".
3. теперь соедините представление с его контроллером. Для этого в контроллере укажите параметр alias, назначив ему значение, которое содержит префикс "controller.".  Например, alias: 'controller.myapp-myviewcontroller'. В представлении укажите параметр "controller". Например так: controller: 'app-myviewcontroller'.
4. определяя обработчики событий представления в listeners, укажите названия методов его контролера.

Посмотреть примеры кода.

Если нужно, чтобы новые контроллеры общались между собой, следует использовать параметр "config". Ниже перечислены все три этапа межконтроллерного взаимодействия.

1. Назначим обработчик события в представлении.

2. В родном контроллере выбрасываем событие, для прослушивания прочими контроллерами.

3. Чужой контроллер "улавливает сигнал" и вносит изменение в своё представление.

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

Поскольку такая техника работы может привести к многоразовой перерисовке всего веб-интерфейса, полезно останавливать рендеринг на время при помощи Ext.suspendLayouts(). Если этого не сделать, то всё будет происходить жутко медленно.

Вот такие они новые контроллеры...

Вот ещё один способ работы с контроллерами представлений.

ExtJs 5: на смену четвёрке

ExtJs пятой версии прошла стадию бета-тестирования и теперь доступна всем для скачивания в качестве готового продукта:

http://www.sencha.com/products/extjs/

Бесплатная версия доступна здесь:

http://www.sencha.com/products/extjs/details

Почему контроллеры нужно указывать все и сразу

 Натолкнулся на форуме javascript.ru на вопрос о том, не лучше ли подгружать контроллеры постепенно. Раньше я пробовал создавать несколько экземпляров контроллеров и подгружать их по мере необходимости. Тогда у меня сложилось такое представление.

Сначала приложение выполняет все методы init() во всех контроллерах, чтобы составить список соответствий селектор-обработчик. Затем приложение рисует панели в DOM, попутно навешивая на создаваемые элементы имеющиеся обработчики событий.

Демо 1

В примере, приведённом по ссылке выше, на каждом этапе запуска приложения появляется информационное окно. Становится очевидной последовательность шагов загрузки приложения:
1. Запускаются методы init() в контроллерах
2. Отрисовывается главный контейнер Viewport с прочими виджетами внутри него

Версии ExtJs 4.0.7 при попытке создать и иницализировать контроллер вне  этой схемы появляется сообщение об ошибке.

В версии ExtJs 4.2.0 такого ограничения уже не наблюдается.

Демо 2

ExtJs 5: документация

Появилась первая официальная информация о пятой версии ExtJs на сайте компании-разработчика.

Документация
Запись в блоге со ссылкой на код бета-версии

Где правильнее размещать стили

Стили CSS правильнее всего размещать в отдельных файлах. Внутри тех компонентов вашего приложения, которые нужно оформить при помощи CSS, укажите имя класса через свойство cls. Запустите в терминале из директории вашего приложения sencha app watch. Теперь при создании и изменении файлов SCSS, будет на лету меняться внешний вид вашего приложения (с задержкой в 1-2 секунды). Куда помещать файлы, чтобы они подтягивались автоматически, показано на скриншоте:

ExtJs 5: люди делятся на две категории

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

Больше нет необходимости писать в контроллеры рефы, а затем повторять те же строчки внутри метода init, чтобы назначить обработчики событий. Имя метода-обработчика можно указывать приямо во view. Для привяки контроллера, view получило дополнительное свойство - controller.

Ext 5 View Controller Event Listening
Мда, у кого-то уже есть, а у кого-то ещё нет...

Виртуалка для занятий

Создавал в Oracle Virtual Box 3.2 (программа бесплатная). В последней версии 4.3 тоже открывается без проблем.
 

КОНФИГУРАЦИЯ

Linux Ubuntu 12.04 LTC 32bit

JRE 1.7.0_51
Apache 2.2.22
MySQL 5.5.35
PHP 5.3.10
PhpMyAdmin 3.4.10

FireFox 27.0.1
FireBug 1.12.7

Ruby 2.0.0
SenchaCmd 4.0.2
ExtJs 4.2.1

NetBeans 7.4

Демо-проект School.


скачать снэпшот
скачать с Яндекса

После установки Oracle Virtual Box в папке VirtualBox VMs, предназначенной для хранения снапшотов, создать подпапку extjs_clone. Поместить в неё оба скачанных файла extjs_clone.vbox и extjs_clone.vdi. Два раза щёлкнуть по extjs_clone.vbox (в Windows), чтобы виртуалка появилась в списке VirtualBox.

extjs_clone

     extjs_clone.vbox

     extjs_clone.vdi

Пользователь: u
Пароль: u

localhost

localhost/phpmyadmin
Username: root
Password: u

Видео-словарь

Сделал в праздники такой онлайн-словарик. Можно ввести русское или английское слово и посмотреть контексты его применения. Интересный момент - оптимизация одностраничного веб-приложения под поисковики. Оказалось, есть такой механизм. Он поддерживается как Google, так и Яндексом. Увидел на привычную документацию Экста в новом свете. Через призму параметра _escaped_fragment_, так сказать. Поглядим теперь, какие боты нас посетят...

Ссылками на клипы или слова можно делиться. Вот, например:

http://vangraph.info/client/#!280f6bbefec560f1b224c10fd59f9c83