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

Стили 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

Кнопки браузера и история

Обычно в одностраничном приложении, написанном на ExtJs есть меню, как и в десктопном приложении или у веб-сайта. Щелчки по пунктам меню переключают активные компоненты приложения. Пользователь видит то один, то другой, то третий...

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

Чтобы решить проблему, используйте Ext.util.History.

У этого объекта есть свои особенности. Он нуждается в скрытом поле ввода и скрытом ифрейме. Кроме того его нужно инициализировать перед использованием.

В момент, когда в DOM-модели уже присутствует элемент BODY, нужно выполнить такой код:

Хорошо подходит для этой цели метод onLaunch контроллера меню или контроллера экрана (viewport).

Чтобы регистрировать новые состояния истории браузера используйте такой код:

Этот код должне находиться в контроллере меню в обработчике кликов по пунктам меню.

Пример из документации.

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

combobox.getPicker().getSelectionModel().getSelection()

getPicker возвращает объект типа Ext.view.BoundList, которому известно, какие записи выпадающего списка были выбраны.

Метод getPicker не описан в документации к версии 4.0.7, но он присутствует в коде библиотеки. В версии ExtJs 4.2.1 этот метод попал в документацию. Значит, можно считать, что его можно использовать и в ранней версии, не опасаясь того, что разработчики откажутся от него в следующей версии.

Связанные списки

Есть два списка xtype=combobox. Выбор элемента в любом списке приводит к фильтрации соседнего. Контроллер обрабатывает событие select. Обработчик этого события находит соседний список и его хранилище. Записи хранилища фильтруются. Проблема: несмотря на то, что фильтрация хранилища отрабатывает правильно, выпадающий список на экране отображает все записи.

Проблема решается установкой свойства lastQuery = '' внутри обработчика события beforequery. пример кода для фанатов MVC:



Теперь на экране всё, как надо:

Если не срабатывает событие, проверьте данные в хранилище.