如何使用Sencha Touch切换视图容器？ [英] How to switch a view container using Sencha Touch?

问题描述

如何在Sencha Touch中切换视图？目前我有一个新的视图正在显示，但它看起来像是覆盖在现有的上。我想我需要隐藏前一个或者毁了它。我在考虑使用Ext.getCmp("noteslist")，但在尝试获取当前容器时返回‘unfined’。这是推荐的在视图之间导航的方式，还是有更好的方式？

应用

Ext.application({
    name: "NotesApp",
    controllers: ["NotesController", "TestController"],
    views: ["NotesListContainer"],

    launch: function () {

        var notesListContainer = Ext.create("NotesApp.view.NotesListContainer");
        Ext.Viewport.add(notesListContainer);
    }
});

控制器：

Ext.define("NotesApp.controller.NotesController", {
    extend: "Ext.app.Controller",
    views: [        
        "TestListContainer"
    ],
    config: {
        refs: {
            newNoteBtn: "#new-note-btn",
            saveNoteBtn: "#save-note-btn",
        },
        control: {
            newNoteBtn: {
                tap: "onNewNote"
            },          
            saveNoteBtn: {
                tap: "onSaveNote"
            }
        }
    },
    onNewNote: function () {
        console.log("onNewNote");
    },
    onSaveNote: function () {
        console.log("onSaveNote");      
        Ext.Viewport.add({xtype:'testlist'}).show();    
            // How do I remove the current one?....         
    },
    launch: function () {
        this.callParent();
        console.log("launch");
    },
    init: function () {
        this.callParent();
        console.log("init");
    }
});

查看

Ext.define("NotesApp.view.NotesListContainer", {
    extend: "Ext.Container",   
    config: {
        items: [{
            xtype: "toolbar",
            docked: "top",
            title: "My Notes",
            items: [{
                xtype: "spacer"
            }, {
                xtype: "button",
                text: "New",
                ui: "action",
                id:"new-note-btn"
            }, {
                xtype: "button",
                text: "Save",
                ui: "action",
                id:"save-note-btn"
            }]
        }]
    }

推荐答案

使用Ext.Viewport.Add只能将组件添加到视区，但不能将其设置为活动项。您可以使用Ext.Viewport.setActiveItem添加组件，并在一次调用中将其设置为活动项。

示例：

//1
Ext.Viewport.setActiveItem({xtype:'testlist'});

//or 2
//Create and add to viewport
Ext.Viewport.add({xtype:'testlist'});
//set active item by index
Ext.Viewport.setActiveItem(1);

//or 3
var list = Ext.create('NotesApp.view.NotesListContainer', {id : 'noteList'});
Ext.Viewport.add(list);
 .....
//In place where you need to show list
Ext.Viewport.setActiveItem(list);

如果要为视图之间的切换设置动画，请使用AnimateActiveItem(List，{type：‘Slide’，Direction：‘Right’})，而不是setActiveItem。

这就是如何使用Ext.Viewport和任何具有卡片布局的容器。在真实的应用程序视图中，可以在应用程序的一个部分(在控制器中，在视图中的应用程序内部)中创建，并在其他部分中设置为活动。在这种情况下，您需要以任何方式获取指向列表的链接，并在setActiveItem中使用它。

这篇关于如何使用Sencha Touch切换视图容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！