一、NavigationView 简介
NavigationView 与 Card 布局的方式有点相似，可以管理多个视图之间的显示或隐藏，但是NavigationView 同一时间只能显示一个视图。有时候，针对没有提供“返回键”的终端系统（例如 iOS）提供一个返回键很有必要，因此，NavigationView 在工具栏上安排了一个返回键，其作用相当于执行 NavigationView 类的 pop() 方法。除返回键外，还有用于 titile 的显示的地方。
NavigationView 切换视图的方法与 Card 布局会有所不同：NavigationView 从当前的视图切换到新的视图应该执行push() 方法，返回上个视图应该执行 pop() 方法。我们可以将 NavigationView 理解成一个栈（stack，关于栈，遵循先进后出的原则：向栈中添加一个对象为入栈 push，从栈中删除一个对象叫做出栈 pop），这个栈中可以存放很多 View。在这个栈创建的时候，我们先给它添加一个 View Controller，称为 Root View，它放在栈底，代表的是刚加载程序的时候显示的视图。当用户新选择了一个想要显示的视图时，那个新的 View 入栈，它所控制的视图就会显示出来。进入一个新的视图后，左上方会出现一个按钮，叫做 Navigation Button，它就像浏览器的后退按钮一样，点击此按钮，当前的 View 出栈，之前的 View 就会显示。
// 创建一个 navigation view 并将其加入到 Ext.Viewport 中去
var view = Ext.Viewport.add({
xtype:'navigationview',
// 初次加载时起码有一面板，可以接下来的跳转。
items: [
{
// 可以与有 title 配置项
padding: 10,
// 在第一个显示的面板中先加入一个按钮吧
items: [
{
xtype: 'button',
text: 'Push another view!',
handler: function() {
// 单击这个按钮，就进入到下面这个新的面板。
view.push({
//this one also hasa title
title: 'SecondView',
padding: 10,
// 如法炮制，该面板也要一个按钮
items: [
{
xtype:'button',
text: 'Popthis view!',
handler:function() {
// 当按下这个按钮，就不要这个面板了，退到上一次哪里的地方。
view.pop();
}
}
]
});
}
}
]
}
]
});
二、两个切换视图方法：push()/pop()
NavigationView 内部的各个视图构成一视图列表，如果 stack 那样的概念，维护 NavigationView 的视图列表仍可以使用 push()/pop() 的接口。
NavigationView.push() 最简单的用法如下，就是制定标题 title 和 内容 html，构成一个对象送入 push() 方法中去，——这等于创建一个新的视图（Panel 面板）并显示。
view.push({
title:'New views title',
html:'Some content'
});
如果或者不是简单的 Panel，而是更复杂的其他组件呢？ NavView 也是可以支持的，例如以下新建的tabPanel 多面板对象，送入的 push() 方法中。
var tabPanel = Ext.create('Ext.tab.Panel', {
items: [
{
title: 'First',
html: 'first'
},
{
title: 'Second',
html: 'second'
}
]
});
view.push(tabPanel);
返回上一页便是 pop()，也可以送入一个 Number 参数，制定返回的页面，——大家可以试一试。
另外 getPreviousItem() 与 pop() 不太一样，getPreviousItem() 没有页面效果，只是返回上一个元素。
Sencha Touch API 中不但有 push()/pop() 方法，另外还有与之对应的事件，签名如下：pop(Ext.navigation.View this, Mixed view, Object eOpts )、push( Ext.navigation.Viewthis, Mixed view, Object eOpts ) 和 back( Ext.navigation.View this, Object eOpts)。back 事件就是返回按钮按下后执行的事件。
三、导航条 NavigationBar
既然顾名思义导航视图，必不可少便是导航条，即 NavigationBar。配置项 defaultBackButtonText 默认是“Back”，但如果你希望采用上一张视图的标题为“返回键”的文字，可以把 useTitleForBackButtonText : Boolean 设为 true 即可。导航条默认位于屏幕上方，如果你想放置在下面，定义 navigationBar 配置项如下：
navigationBar: {
ui:'dark',
docked:'bottom' // 反之 'top' 为顶部
}
如果把 navigationBar 设为 false 表示隐藏导航条。
四、小结
NavigationView 是 Sencha Tounch 2.0 新提供的包，十分好用，使用的时候把它想象成一个栈，用起来就会比较简单。而且切换视图会有 Ext 炫丽的呈现方式，就是切换动画（我在低端的机子上测试过，感觉效果还可以，不会太慢）。在纯web的app或者没有内置导航控制下，NavigationView 作用还是非常明显的。
