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页面,点击返回按钮则可以返回