如何从 ExtJS 5 上的控制器加载新视图？

Question

所以我正在开发一个基于 Sencha ExtJs 5.1.0 的多视图应用程序。这可能是一个非常愚蠢的问题。但是，如何从控制器加载另一个视图？我在 MVVM 模式下工作。

在我的 index.html 上，我有一个 ID="senchaContent" 的 div，我正在渲染我的第一个视图：

Ext.application({
    name: 'EXAMPLE',

    extend: 'EXAMPLE.Application',

    //autoCreateViewport: 'EXAMPLE.view.main.Main'
    launch: function() {
        Ext.create('MODIFE.view.main.Main',{
            renderTo: 'senchaContent'
        });
    }
});

在 MainController 上，我正在处理应该加载另一个视图的事件（替换 #senchaContent Div 中的 EXAMPLE.view.main.Main）。

我如何实现这一点（销毁以前的视图并渲染新视图）？

谢谢！

Answer 1

最简单的解决方案是使用一个面板来处理这两者。然后您只需将新视图添加到面板即可。

查看我的示例：https://fiddle.sencha.com/#fiddle/l61

控制器切换逻辑：

onShowView1 : function() {
    this.getView().removeAll();
    this.getView().add(Ext.create("MyView1"));
},

onShowView2 : function() {
    this.getView().removeAll();
    this.getView().add(Ext.create("MyView2"));
}

如何从 ExtJS 5 上的控制器加载新视图？

How to load a new view from controller on ExtJS 5?

extjs

mvvm