Question

Starting off with my Main view, it loads another view with xytpe ‘homepanel’.

Ext.define('MyApp.view.MainView', {
    extend: 'Ext.TabPanel',
    alias: 'widget.main',
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                xtype: 'homepanel', // loads view with xytpe 'homepanel'
            }
        ]
    }
});

from ‘homepanel’ we can go to the Youtube view which has a Close button in the top left

Ext.define('MyApp.view.YoutubeView', {
    extend: 'Ext.navigation.View',
    xtype: 'youtube',
    // id:    'youtube',
    config: {
        navigationBar: {
            items: [
                {
                    xtype:    'button',
                    iconMask: true,
                    text:     'Close',
                    align:    'left',
                    action:   'closeButton'
                }
            ]
        },
    }
});

When clicking the Close button, I’d like to go back to the Main view, if possible reloading it in case new posts have been placed.

Unfotunately this controlller code doesn’t work as it throws a Object ext-viewport has no method 'hide' error.

Ext.define('MyApp.controller.PostStuffController', {
    extend: 'Ext.app.Controller',
    requires: [
        'Ext.navigation.View'
    ],
    config: {
        control: {
            'button[action=closeButton]': {
                tap: 'tapClose'
            }
        }
    },
    tapClose: function () {
        Ext.Viewport.getId().hide();
    }
});

Any suggestion on how to close the current view and load Main?

Answer 1

This did the trick:

tapClose: function (cmp) {
    Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
}