How to get access to the view? | Ext.js 6

Question

Currently I am learning ext.js 6 and I have a quastion to ask.

I want to build a tree-like menu and from examples I know how to build all kinds of trees. But how can I change a view when user clicks on different leefs in a tree? I know I need controller(viewcontroller) and handlers to work with events (onClick and such) but how to render views from there?

Thank you.

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

You need to use add() function for that:

add( component ) : Ext.Component[]/Ext.Component

Adds Component(s) to its parent.

You need to pass the view to be rendered as parameter

Eg. Adding a formpanel & button directly to the view port:

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 16 '16 at 09:02

Ankit Chaudhary

4,059
1
11
23

score 1 · Answer 2 · answered Feb 16 '16 at 09:19

Im my application (its use ExtJS 4 actually, but I guess idea is the same) I do something like this:

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'
        }
    ]
});

And on menu item click I remove any content from main panel and add new one, like this:

// 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]);

Also you can take a look at Ext.util.History and on menu click add new token to history and on history change event open application page like described above.

How to get access to the view? | Ext.js 6

2 Answers2