读书频道 > web开发 > Javascript > Sencha Touch权威指南
3.5.1 NavigationView组件的使用及示例
2012-10-09 16:35:39     我来说两句 
收藏    我要投稿   

本文所属图书 > Sencha Touch权威指南

如何才能全面而透彻地理解和掌握移动应用开发框架Sencha Touch并开发出令人心动的移动应用?本书将给我们满意的答案!它的内容系统而全面,细致地讲解了Sencha Touch的所有功能、特性、使用方法、开发技巧,让...  立即去当当网订购

3.5 NavigationView组件

Sencha Touch 2.0中的NavigationView组件本质上是一个具有Card布局的容器组件,所以每次只显示一个内部子组件。但是它提供一些附加特性,这使得该组件更加像一个“堆栈”容器组件。即可以将子组件堆入该组件中,然后再按照入栈顺序依次取出位于栈顶的子组件。同时,NavigationView组件自动实现在子组件进行入栈出栈操作时所执行的动画特效、自动实现NavigationView组件中后退按钮的展示功能、自动执行当用户单击后退按钮时位于栈顶的子组件的出栈操作。

3.5.1 NavigationView组件的使用及示例

在Sencha Touch 2.0中,使用Ext.navigation.View类定义NavigationView组件,类的别名为Ext.NavigationView。

看一个NavigationView组件的使用示例,该示例的app.js脚本文件如代码清单3-13所示。

代码清单3-13 NavigationView组件的使用示例

Ext.require('Ext.NavigationView')
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    launch: function() {    
        var view = Ext.create('Ext.NavigationView', {
            items: [{
                title: '标题一',
                html:'组件1'
            }]
        });
        panel=Ext.create('Ext.Panel',{
            title: '标题二',
            html:'组件2'
        });
        Ext.Viewport.add(view);
        view.push(panel);
    }
});

在这个示例代码中,使用NavigationView组件的push方法将文字为“组件2”的面板组件堆入栈顶,该方法使用一个参数,代表需要堆入栈顶的组件。在浏览器中打开示例页面,页面中显示该面板组件,如图3-17所示。

单击Back按钮,文字为“组件2”的面板组件被弹出栈外,页面中显示文字为“组件1”的容器组件,如图3-18所示。


 

可以随时在栈中堆入新的组件,例如在栈中堆入一个文字为“组件3”的面板组件,launch函数中的代码如下:

launch: function() {    
    var view = Ext.create('Ext.NavigationView', {
        items: [{
            title: '标题一',
            html:'组件1'
        }]
    });
    panel=Ext.create('Ext.Panel',{
        title: '标题二',
        html:'组件2'
    });
    Ext.Viewport.add(view);
    view.push(panel);
    panel=Ext.create('Ext.Panel',{
        title: '标题三',
        html:'组件3'
    });
    view.push(panel);
}

浏览器中打开修改后的示例页面,页面中显示文字为“组件3”的面板组件,如图3-19所示。


 

在脚本代码中使用NavigationView组件的pop方法将栈顶组件弹出栈外,方法如下:
view.pop();

将文字为“组件3”的面板组件堆入栈中后使用该方法,代码如下:

launch: function() {    
    //前面代码略
    view.push(panel);
    view.pop();
}

在浏览器中打开修改后的示例页面,文字为“组件3”的面板组件被弹出栈外,页面中显示文字为“组件2”的面板组件,如图3-17所示。

另外, 可以使用NavigationView组件的reset方法把栈中所有非栈底组件弹出栈外,使NavigationView组件中显示位于栈底的组件。

将上面这段代码修改为如下代码,然后在浏览器中打开修改后的示例页面,页面中将显示文字为“组件1”的容器组件,如图3-18所示。

launch: function() {    
    //前面代码略
    view.push(panel);
    view.reset();
}

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:3.4.3 Carousel组件的常用方法
下一篇:3.5.2 配置NavigationView组件的标题栏
相关文章
图文推荐
3.12 本章小结
3.10 添加新函数
3.9 递归
3.8 闭包
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站