Sencha Touch - 控制器

控制器是 MVC 架构的主要组件之一。

控制器是控制功能的组件。我们在控制器中编写监听器，它充当视图和模型之间的粘合剂，其中视图用于可视化 UI，而模型用于存储和操作数据。

控制器的主要功能是 −

操作写在控制器中，就好像我们在应用程序中按下按钮或将鼠标悬停在某个链接上一样，必须执行的操作写在控制器监听器函数中。
控制器具有可用的 init 和 launch 函数，一旦应用程序和控制器启动，就会调用它们。

控制器 Init 和 Launch 函数

我们可以在控制器中定义 launch 和 init 函数。应用程序可以有自己的启动函数，因此函数的调用顺序如下。

应用程序启动时，首先调用控制器的 Init 函数。
然后调用应用程序的启动函数。
一旦调用应用程序的启动并启动应用程序，就会调用控制器的启动函数。

控制器的配置组件

我们可以在控制器的配置中拥有 refs 和 control。让我们看看两者的工作方式。

Refs

配置中的 Refs 可以按以下示例所示使用。

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

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

Refs 可用于引用任何 id。如上例所示，tab 是引用 id #divId 的 ref。

Refs 以键值对的形式创建，如上例所示，tab 是键，divId 是值。每当创建 ref 时，都会自动为其创建获取和设置方法。在上面的例子中，我们创建了一个 ref 作为 tab，因此我们可以将其作为自动创建的 getTab 方法访问。

Control

Control 是一种类似于 ref 的配置，它将 ref 作为键，将值作为监听函数，调用该函数来执行某些任务。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      control: {
         loginButton: {
            tap: 'doLogin'
            // ref tap 是键，doLogin 是值，它是一个监听器。
         }
      },

      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 发生变化时，路由都会自动调用特定的控制器函数。

sencha_touch_core_concepts.html