Предлагаю поместить все формы в контейнер с
layout: 'fit'. Все формы скрыты при помощи параметра
hidden: true. Когда пользователь щёлкает по меню, контроллер находит нуждую форму и загружает в неё данные. Снабдите формы параметром itemId, когда будете размещать их в контейнере, чтобы их можно было потом найти. Контейнеру тоже дайте какой-нибудь itemId.
Ext.define('CM.controller.NavigationController', {
extend: 'Ext.app.Controller',
init: function() {
this.listen({
component: {
appnavigation: {
itemclick: this.onNavigationItemClick
}
}
});
},
onNavigationItemClick: function(treeview, record) {
var formContainer = Ext.ComponentQuery.query('[itemId="form-container"]')[0];
// скрываем все формы
Ext.Array.each(formContainer.items, function(formItem) {
formItem.hide();
});
// находим нужную форму
var activeForm = Ext.ComponentQuery.query('[itemId="' + record.get('id') + '"]')[0];
// показываем эту форму
activeForm.show();
// загружаем в активную форму данные (например, с сервера)
if (activeForm.is('grid')) {
activeForm.getStore().load({
params: {
}
});
}
}
}
Хотя правильнее было бы иметь для каждой формы свой контроллер с обработчиком события, приходящего от контроллера навигации. Тогда не потребуется такое ветвление
if (activeForm.is('grid')) {}.