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' 
}