控制器如何在Extjs應用程序中與MVC一起使用

Question

我是Extjs的新手，在瀏覽了Extjs MVC模式的一些教程和博客后，我不清楚如何在extjs平台上構建復雜的應用程序（例如10 - 15頁面導航）。

在sencha論壇中，建議所有控制器都需要在app.js中預先定義（因為與加載DOM的UI相比，加載控制器之前的性能不會受到影響。請注意，這是由sencha論壇提到的經理）。

按照上述方法，我幾乎沒有問題：

• 控制器什么時候實例化？ 它們都是在應用程序加載時加載和實例化的，並且在應用程序的生命周期內一直監聽它們中定義的事件嗎？

• 在控制器類中定義Models []，Stores []和Views []意味着什么？ 什么時候加載並實例化？

• 頁面導航如何與控制器一起使用？ 如果導航到新頁面只是轉換為getParentContainer.remove（componentX）和getParentContainer.add（componentY），那么控制器的目的僅僅是處理事件的文件？

• 控制器是否有任何范圍（實例化>銷毀）？ 如果不是如何創建和銷毀多個實例，以便我的操作不被錯誤的實例監聽（我看過一些提到控制器的博客大多是單身）？

有人可以對此有所了解嗎？ 任何示例/插圖都會有很大幫助。

謝謝

Answer 1

在Ext JS中，Ext.app.Controller類（開箱即用）通過應用程序的初始化進行實例化。 實際上，控制器的init（）在應用程序本身的launch（）之前被調用。 所以，是的，控制器是“生命者”，從應用程序在應用程序的整個生命周期開始的那一刻開始聆聽。 有動態創建和銷毀控制器的方式，但這需要一個定制的實現。

然而，在Ext JS 5中，引入了ViewController的概念。 它擴展了與Ext.app.Controller相同的基礎（Ext.app.BaseController），但與上面不同，ViewController與它綁定的視圖實例一起被創建和銷毀。 這由框架自動處理 - 無需自定義實現以使其工作。

關於模型：[]，存儲：[]和視圖：[]，這些基本上是控制器的requires（），指示它確保加載這些類。 這些約定只是從特定命名空間（例如，AppName.view，AppName.store等）中要求這些類的簡便方法。 對於視圖和存儲，此約定還將為所需的類生成getter。

關於導航，這取決於你。 您可以通過多種方式創建Ext JS應用程序。 您可以執行“單頁”應用程序，其中導航可能與您提到的非常相似（很多我的）。 您還可以創建多頁面應用程序，這些應用程序可以提供更傳統的網站頁面到頁面的感覺，但是根據每個頁面的需要，可以為每個頁面利用通用代碼和類。

最后，關於聽眾碰撞的問題，答案是“它取決於”。 如果您正在使用Ext JS 4，那么您只有 “lifer”控制器，因此避免偵聽器中的沖突是一個非常了解您在listen（）或control（）部分中使用的選擇器的問題。確保您不會復制監聽器（通過顯式復制或過寬的選擇器），除非您想要這樣做。 但是，使用Ext JS 5，ViewController概念或多或少消除了這種擔憂，因為ViewController的“監聽”域被約束到它所綁定的視圖的實例。

就示例而言，我絕對鼓勵您從Ext JS 5的文檔開始：

http://docs.sencha.com/extjs/5.0/whats_new/5.0/whats_new.html

http://docs.sencha.com/extjs/5.0.1/

“什么是新的”文檔有一些非常棒的架構討論，這些討論深入研究了這些概念的細節，遠遠超出SO的可行性。