Question

我正在寻找一种正确的方法来实现我的视图和各自的控制器之间的通信。

从其视图中调用控制器方法？
在控制器内部引用其视图？

所以现在，我在我的视图中调用控制器的方法，如下所示：

Ext.define('SomeApp.view.SomeTab', {
extend: 'Ext.grid.Panel',

alias: 'widget.someTab',

initComponent: function() {

    // Calling respective controller method to run the initializing sequence
    PfalzkomApp.app.getController('someTabController').initializeSomeTab();
    this.callParent();
}, ....

要访问我的控制器内的视图，我按了this solution

Ext.define('SomeApp.controller.SomeTabController', {
    extend: 'Ext.app.Controller',

    views: [
        'SomeTab'
    ],

    refs: [{
        ref: 'SomeTab',//xtype
    }],...

但是我只能在渲染之后访问我的视图才有意义，但我想知道是否有更好的解决方案。

谢谢。

Answer 1

在我看来，（虽然您使用的是ExtJS 4.2），但您可以遵循最新版本（5 +，6 +）的Extjs架构，即每个视图都与其特定的控制器（或视图控制器）相关联。它比控制器监听多个视图的事件更好。

在您的情况下，控制器可以是：

Ext.define('SomeApp.controller.SomeTabController', {
    extend: 'Ext.app.Controller',

...

init: function() {
    this.control({
        'someTab': {
             beforerender: this.loadView//use the event you want
         } 
    })
},

...
loadView: function(view){
    //your code
}

beforerender方法允许您在呈现视图之前访问该视图。 https://docs.sencha.com/extjs/4.2.0/#!/api/Ext.grid.Panel-event-beforerender

所以，

- 从视图中调用控制器方法？ 从视图中调用控制器函数可以使用属性listeners进行操作并听取您想要的事件。

- 在控制器内部引用其视图？ 在这种情况下，如果您注册组件的事件以调用控制器上的函数，通常this应该是您的视图（someTab）。您还可以使用选择器监听视图中组件的事件。

希望这能帮到你！

ExtJs 4.2 - 在视图和控制器之间进行通信的正确方法

1 个答案: