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

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的配置，在这里只是让我们的第一个项目都有一些虚拟的内容。

新的看法，推

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

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

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

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项以上在栈中为这个做任何事情。当你取出时，它会做几件事情：

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

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

view.pop();

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

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