Sencha-组件-NavigationView(导航视图)（官网文档翻译21）

最新推荐文章于 2023-04-11 11:50:00 发布

转载最新推荐文章于 2023-04-11 11:50:00 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cheman/archive/2012/12/26/2834938.html

本文详细介绍了 Sencha 的 NavigationView 组件，包括其基本使用、如何进行新增和弹出视图的操作，以及相关配置选项。通过示例演示了如何创建一个简单的导航视图并进行基本的视图管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Sencha-组件-NavigationView(导航视图)（官网文档翻译21）

导航视图是一个新的组件，在煎茶触摸2。在它的基础，它是一个简单的容器用卡的布局和停靠工具栏，但是我们之上建立一个简单的方法来推动（ADD）和弹出（删除）在栈的时尚意见。当你按下一个视图，它会添加到堆栈视图和动画新标题到工具栏。它也将动画后退按钮到工具栏，这样你就可以返回到上一个视图（或弹出）。

为了证明这一点的最简单的方法是一个例子：

创建一个简单的导航视图

创建导航视图，就像创建其他容器。您使用Ext.ClassManager.create的创建您的导航视图实例的配置，你只需要添加项目。

var view =Ext.create('Ext.navigation.View',{
    fullscreen:true,
    items:[{
            title:'Navigation View',
            html:'This is the first item in the stack!'}]});

正如你可以看到，我们只给出了两种配置：

fullscreen: This is so it is automatically inserted into the viewport.
items: This is the items that the navigaiton view will contain by default. We only insert one item here, which means it will the first item in the stack; therefore active.
- title: This is the title that will be displayed navigation bar (not required).
- html: We use the html configuration here just so our first item has some dummy content.

全屏：这是它会自动插入的视口。
项目：这是项目的navigaiton视图将包含在默认情况下。我们只在这里插入一个项目，这意味着它会在堆栈中的第一个项目，因此积极。
- 标题：这是标题将显示导航栏（不是必须的）。
- HTML：我们使用HTML的配置，在这里只是让我们的第一个项目都有一些虚拟的内容。

新的看法，推

“推”是指添加一个新的视图导航视图的堆栈。这将做三件事：

在导航视图中的动画显示新的项目（幻灯片）。
动画（幻灯片）在导航栏中的标题配置项（如果指定的话）。
到导航栏的后退按钮的动画（幻灯片）。

推的意见是简单的使用推方法：

view.push({
    title:'New views title',
    html:'Some content'});

你可以传递一个引用的一个组成部分或一个像我一样的配置。当然，你推的项目可以是任何的Ext.Component的子类：

var tabPanel =Ext.create('Ext.tab.Panel',{
    items:[{
            title:'First',
            html:'first'},{
            title:'Second',
            html:'second'}]});

view.push(tabPanel);

弹出次数

'流行'是指最上面的（视觉活动）视图导航视图中删除。当然，你需要有1项以上在栈中为这个做任何事情。当你取出时，它会做几件事情：

动画导航视图中的上一项堆栈（反向幻灯片）。
动画目前的标题来看，和以前的协议栈到视图的标题（幻灯片）动画。
动画后退按钮来看，如果仍然有2个以上项目在栈中，动画先前的观点，“后退”按钮。

跳跳的意见是很简单的。你只需要调用的弹出的方法：

view.pop();

posted on 2012-12-26 23:28 CW.Liu 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/cheman/archive/2012/12/26/2834938.html