The use of navigationview

The use of navigationview

navigationview provides a top navigation bar navbar

 

By default, the UI of the return button is dark and cannot be seen clearly. Modify the default UI of the button to null.

 

Ext.define('overrides.navigation.Bar', {
    override:'Ext.navigation.Bar',
    config:{
        /**
         * @cfg {Ext.Button/Object} backButton
         * The configuration for the back button
         * @private
         * @accessor
         */
        backButton: {
            align: 'left',
            ui: null,
            hidden:true,
            iconCls:'x-fa fa-chevron-left',
        },
    }
});

 

 

 

then add navbar

 

{
    title: 'Homepage',
    iconCls: 'x-fa fa-home',
    xtype:'navigationview',
    id:'nav-start',
    defaultBackButtonText: 'Back',
    navigationBar:{
        hidden:true,
    },
    listeners:{
        pop:function(nav,view){
            if(nav.getInnerItems().length<2)
                nav.getNavigationBar (). hide ();
        },
        push:function(nav,view){
            if(nav.getInnerItems().length>1)
                nav.getNavigationBar (). show ();
        },
    },
    items: [{
        xtype: 'start'
    }]
},

 

 

 

The function of the pop and push events is to hide the navbar on the first page

Then you can push the new view page through the push method of the navigationview, and click the back button to return