navigationview的使用

navigationview的使用

navigationview提供了一个顶部的导航栏navbar

 

默认情况下返回按钮的UI是深色调无法看清，这里修改一下按钮的默认UI为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',
        },
    }
});

 

 

 

然后添加navbar

 

{
    title: '主页',
    iconCls: 'x-fa fa-home',
    xtype:'navigationview',
    id:'nav-start',
    defaultBackButtonText: '返回',
    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'
    }]
},

 

 

 

pop,push事件的作用是在第一页的时候可以隐藏navbar

然后可以通过navigationview的push方法压入新的view页面，点击返回按钮则可以返回