Как получить доступ к представлению? | Ext.js 6

Question

В настоящее время я изучаю ext.js 6, и у меня есть quistion, чтобы спросить.

Я хочу построить древовидное меню и от examples Я знаю, как строить все виды деревьев. Но как я могу изменить представление, когда пользователь нажимает на разные уровни в дереве? Я знаю, что мне нужен контроллер (viewcontroller) и обработчики для работы с событиями (onClick и т. Д.), Но как визуализировать представления?

спасибо.

Answer 1

Вы должны использовать add() функцию для этого:

добавить (компонент): Ext.Component []/Ext.Component

Добавляет компонент (ы) с его родителем.

Вам необходимо пройти представление, чтобы быть оказаны в качестве параметра

Eg. Добавление formpanel & button непосредственно на глазок:

Ext.Viewport.add([ 
{ 
    xtype:'formpanel' 
}, 
{ 
xtype:'button' 
} 
]); 

Answer 2

Im мое приложение (его использование ExtJS 4 на самом деле, но я думаю, идея та же) я что-то вроде этого:

var viewport = Ext.create('Ext.container.Viewport', { 
    alias: 'widget.viewport', 

    layout: 'border', 

    items: [ 
     // Its my main menu, displayed on all pages 
     portalToolbar, 
     { 
      xtype: 'panel', 
      itemId: 'mainPanel', 
      layout: 'fit', 
      region: 'center' 
     } 
    ] 
}); 

И по пункту меню нажмите кнопку Я удалить все содержимое из главной панели и добавить новый, как это:

// remove previous page from main panel, 
// think about `abort()`ing all ajax requests, clear intervals and so on along with this 
mainPanel.removeAll(); 
// `currentInterface` is any component that is one of the pages of my application 
mainPanel.add([currentInterface]); 

Также вы можете TA ke посмотрите на Ext.util.History и в меню нажмите Добавить новый токен в историю и историю change открытую страницу приложения, как описано выше.