ST 2 NavigationView 初探

一、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 作用还是非常明显的。