Sencha Touch - 过渡到页面

Question

我一直在玩 Sencha Touch 2，遇到了两种页面之间的转换方式（例如，从主页到登录）。

一种方式：
app.js:

launch: function() {
    var loginPage = {
        xtype: 'loginview'
    };

    var homePage = {
        xtype: 'homeview'
    };

    Ext.Viewport.add([loginPage, homePage]);
}

controller/Home.js

onLogOff: function() {
    ...
    var loginPage = this.getLoginView();
    Ext.Viewport.animateActiveItem(loginPage, this.slideRight);
},
slideRight: {
    type: 'slide', direction: 'right'
}

另一种方式：
app.js:

launch: function() {
    var loginPage = {
        xtype: 'loginview'
    };

    Ext.Viewport.add(loginPage);
}

controller/Home.js

onLogOff: function() {
    ...
    var loginPage = { xtype: 'loginview' };

    Ext.Viewport.add(loginPage);
    Ext.Viewport.remove(this.getHomeView());
}

首选的转换方式是什么？

我很想一次只向视口添加一个页面（第二种方法），但作为该框架的新手，我不确定这是最好的方法。

两者之间是否有显着差异，如果有，是什么？

Answer 1

我的建议是使用第二种模式。

首先，您不希望没有 "logged in" 的人能够检查 "authenticated" 区域的 HTML。此外，您不希望向 DOM 呈现比单页应用程序中任何时候都必须呈现的更多内容。减少 DOM 中的内容将有助于防止性能和显示问题。

Sencha Touch - 过渡到页面

Sencha Touch - transitioning to pages

extjs

sencha-touch

sencha-touch-2