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

Обычно в одностраничном приложении, написанном на 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:



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

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