Sencha Touch - 控制器

控制器是 MVC 架構的主要元件之一。

控制器是控制功能的元件。我們在控制器中編寫監聽器，它充當檢視和模型之間的粘合劑，其中檢視用於視覺 UI，而模型用於儲存和操作資料。

控制器的主要功能有：

• 操作在控制器中編寫，例如，如果我們在應用程式中按下按鈕或將滑鼠懸停在某個連結上，則將在控制器監聽器函式中編寫要執行的操作。

• 控制器提供了 init 和 launch 函式，它們在應用程式和控制器啟動時被呼叫。

控制器 Init 和 Launch 函式

我們可以在控制器中定義 launch 和 init 函式。應用程式可以有自己的 launch 函式，因此以下是函式應該被呼叫的順序。

• 應用程式啟動時首先呼叫控制器的 Init 函式。

• 然後呼叫應用程式的 launch 函式。

• 在應用程式的 launch 函式被呼叫並且應用程式啟動後，將呼叫控制器的 launch 函式。

控制器的 Config 元件

我們可以在控制器的 config 中使用 refs 和 control。讓我們看看兩者是如何工作的。

Refs

Refs 在 config 中的使用方式如下例所示。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      refs: {
         tab: '#divId
      }
   },

   addLogoutButton: function() {
      this.getTab().add({
         text: 'Logout'
      });
   }
});

Refs 可以用來引用任何 id。如上例所示，tab 是建立的 ref，它引用了 id #divId。

Refs 以鍵值對的形式建立，如上例所示，tab 是鍵，divId 是值。每當建立一個 ref 時，都會自動為其建立 getter 和 setter。在上例中，我們建立了一個名為 tab 的 ref，因此我們可以透過 getTab 方法訪問它，該方法是自動建立的。

Control

Control 是一種與 ref 類似的 config，它以 ref 作為鍵，以 listen 函式作為值，該函式被呼叫以執行某些任務。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      control: {
         loginButton: {
            tap: 'doLogin'
            // ref tap is the key and doLogin is the value which is a listener.
         }
      },

      refs: {
         loginButton: 'button[action=login]' 
      }
   },

   doLogin: function() {
      // called whenever the Login button is tapped
   }
});

路由

控制器定義了它感興趣的路由。藉助路由，我們可以將應用程式的任何部分連結到提供的路由。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin',
		 'user/:id': 'userId'
      }
   },

   showLogin: function() {
      // statements
   },
   userId: function() {
      // statements
   }
});

路由可以透過瀏覽器的位址列 URL 訪問。

在上例中，如果使用者訪問 URL https://myApp.com/#login，則將呼叫 showLogin 控制器函式。

路由也可以使用萬用字元，例如，如果瀏覽器 URL 為 https://myApp.com/#user/3003，則將呼叫 userId 函式。

因此，每當瀏覽器 URL 更改時，路由都會自動呼叫特定的控制器函式。