How to hide NavigationBar in NavagationView on Sencha Touch 2

In Sencha Touch 2, Navigation View allows you to Push and Pop views into the application. Its basically an  container with a card layout, so only one view can be visible at a time.

By default, NavigationBar will be present when you add NavigationView Component. This NavigationBar provides Back button and additional configurations like apply animation, Positioning, tpl configuration and so on. You can hide the NavigationBar using the hidden config property

Ext.define('MyApp.view.MyNavigationView', {

    extend: 'Ext.navigation.View',
    alias: 'widget.mynavigationview',

    config: {
        id: 'mynavigationview',
        navigationBar: {
            docked: 'top',
            hidden: true
        }
    }
});

Dynamically hide the NavigationBar

You may came across a scenario, where you need to hide the NavigationBar present in the NavigationView dynamically. For that, let's first the get the reference of the NavigationView using xtype or id configuration in the controller class.

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            navView: '#mynavigationview'
        }
    }
});

then, get the NavigationBar object from the NavigationView using getNavigationBar(). Then apply setHidden(true) method to the NavigationBar Object. Following is the code

this.getNavView().getNavigationBar().setHidden(true);

Hope, you enjoyed this Post.