How to redirect to another view from button click (ExtJS 6.2)

I have this button class defined as follows :

Ext.define('Mine.view.buttons', {
    extend: 'Ext.container.Container',
    alias: 'widget.MyClass',
    requires: [
            'Mine.view.Main',
            'Mine.view.newDashboard'
        ],
    xtype: 'myclass',
    items: [{
        xtype: 'button',
        html: '<img src=\"../../iDeviceMap.png\" width="76" height="76"/>',
        text: '',
        width: 76,
        height: 76,
        handler: function() {

this.redirectTo('main', true);

    }]
});

Which i embed in a Panel view along with other components (composing the main view) defined in another class. My problem is that this.redirectTo('main', true); doesn't work. How to do the redirection with the right "this" that of the main view where the button is defined (say Mine.view.Main) ? Q2 : how to call the parent view (Mine.view.Main) from the handler of the button?

Thanks.

The button handler should be a function in the controller. The method in the controller with then call the redirectTo method.

Or you could get the panel's controller in the button's handler and call it from there.... best to do it in the controller so if you write a different view for a phone or tablet each view can share the controller.

A fiddle showing switching panels

Same fiddle so you can see the hash change

EDIT: @ltes - I wrote a fiddle that did what you wanted it to do. You ask a question about two methods. It would be much faster for you to simple review the documentation on each of these methods.

Ext.create method Ext.Container down method

You don't understand the tool kit you are using. Ext.Create will create a new object this.getView().down and up() look in the hierarchy to find a component. If you want to replace a panel then use the remove() and add() method on the panel. YOu don't have to execute Ext.create when you add you can simply pass a config:

panel.add({
    xtype: 'panel',
    title: 'This is my new panel',
    html: 'new panel data'
}