ExtJs上的全局视图+视图控制器5

Question

我想要实现的是非常简单的，我希望在我的应用程序中有一个主菜单，所有视图都具有相同的功能。

我想创建一个仅包含菜单部分加上它自己的viewcontroller的视图。什么才是实现这个目标的最好方式？

我正在使用ExtJS 5实现MVVM范例。

谢谢！

Answer 1

这是一个相当广泛的问题，关于如何构建应用程序，如果不了解应用程序的其他部分，就很难回答。

一般来说，任何应用程序全局（这不是应用程序容器/视口）可能最容易实现与MVC。菜单控制器（MVC控制器）会监听菜单事件，然后深入组件层次结构以调用组件的API方法来执行操作。

如果我知道应用程序，我可以更具体。

Answer 2

我会创建一个主视图，在其中定义应用程序的固定部分，以及一个容器，其布局'fit'可容纳不断变化的“视图”。而不是布局'适合'，这可能也是一个标签面板或什么的。当然，没有什么能够阻止你使用视图控制器将行为添加到这个主视图的固定部分。

其实很简单。然后，您将通过将当前应用视图放入主视图的中央容器来更改它。您需要某种决策逻辑和配置数据来定义应用程序中的可用视图。这可能是最好的，只在一个地方专门负责这个任务，这是一个应用程序控制器（而不是视图控制器）。

下面是一个example fiddle和波纹管的理由解释代码的不同部分：

所以，你开始这样一个观点：

Ext.define('My.view.Main', { 
    extend: 'Ext.container.Container', 

    xtype: 'main', // you can do that in ext5 (like in touch) 
    // shortcut for that: 
    //alias: 'widget.main', 

    controller: 'main', 

    layout: 'border', 

    items: [{ 
     xtype: 'panel', 
     region: 'west', 
     layout: {type: 'vbox', align: 'stretch', padding: 5}, 
     defaults: { 
      margin: 5 
     }, 
     items: [{ 
      xtype: 'button', 
      text: "Say Hello", 
      handler: 'sayHello' 
     }] 
    },{ 
     // target for app's current view (that may change) 
     xtype: 'container', 
     region: 'center', 
     layout: 'fit' 
    }] 
}); 

Ext.define('My.view.MainController', { 
    extend: 'Ext.app.ViewController', 

    alias: 'controller.main', 

    sayHello: function() { 
     Ext.Msg.alert("Controller says:", "Hello :-)"); 
    } 
}); 

然后，设置这个主视为您的应用程序的“视口”。我还添加了一种方法来更改中心视图。我认为应用实例应该是一个不错的地方，但你可以将这个方法移动到另一个专用应用程序控制器...

Ext.application({ 
    name : 'My', // app namespace 

    // in real life, Main view class would lie in another file, 
    // so you need to require it 
    views: ['Main'], 

    // from ext 5.1, this is the config to auto create main view 
    mainView: 'My.view.Main', 

    // we also register a ref for easy retrieval of the main view 
    // (the value 'main' is the xtype of the main view -- this is 
    // a component query) 
    refs: { 
     main: 'main' 
    }, 

    setCenterRegion: function(cmp) { 
     // getter generated by refs config 
     // you could another layout in the main view, and another component query of course 
     var center = this.getMain().down('[region=center]'); 
     // replace the current center component with the one provided 
     center.removeAll(); 
     center.add(cmp); 
    } 
}); 

所以，现在，你可以用代码改变看法是这样的：

My.getApplication().setCenterRegion(myView); 

您可以通过主视图的ViewController将其连线，并将其用作视图中的处理程序。例如，在您的ViewController：

changeView: function() { 
    // retrieve the next view, this is application specific obviously 
    var myView = ... 

    // My.getApplication() gives you the instance created by 
    // Ext.getApplication in namespace 'My' 
    My.getApplication().setCenterRegion(myView); 
} 

而且，在主视图中，使用这样一个项目：

​​

这可能是罚款，简单的应用程序，不过这似乎是关心的混合。决定应用程序级别视图交换看起来更像是一个应用程序控制器的业务。所以，我宁愿建议把changeView方法在应用程序控制器，并将其与组件查询暴露于部件，像这样：

Ext.define('My.controller.Main', { 
    extend: 'Ext.app.Controller', 

    config: { 
     control: { 
      // components will have to match this component query 
      // to be animated with the change view behaviour 
      '#changeView': { 
       click: 'changeView' 
      } 
     } 
    },  

    changeView: function() { 
     My.getApplication().setCenterRegion(/* 
      ... 
     */); 
    } 
}); 

而且你会挂钩的行为在任何这样的视图组件：

{ 
    xtype: 'button', 
    text: "Change view (by app controller)", 
    // will be matched by the controller component query 
    itemId: 'changeView' 
}