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

Question

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

在我的索引上.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"));
}