Sencha Touch：控制器

控制器是MVC体系结构的主要组件之一。

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

控制器的主要功能是：

• 动作被写在控制器中，就像我们在应用程序中按下按钮或将鼠标悬停在某个链接上一样，必须执行的动作被写在控制器监听器函数中。
• Controller具有可用的初始化和启动功能，一旦启动应用程序和控制器，就会调用这些功能。

控制器初始化和启动功能

我们可以在控制器中定义启动和初始化功能。应用程序可以具有自己的启动功能，因此这是调用功能的顺序。

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

控制器的配置组件

我们可以在控制器的配置中具有引用和控制。让我们看一下两者的工作方式。

参考

可以使用config中的引用，如以下示例所示。

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

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

引用可用于引用任何ID。正如我们在上面的示例中看到的那样，选项卡是创建的引用，它引用了ID #divId。

引用是在键值对中创建的，如上例所示，tab是键，而divId是值。每当创建引用时，都会自动为它创建get和setter。在上面的示例中，我们创建了一个ref as选项卡，因此我们可以将其作为自动创建的getTab方法进行访问。

控制

控制是类似于ref的配置，它将ref作为键，将值作为侦听功能，调用ref来执行某些任务。

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
   }
});

路线

Controller定义了它感兴趣的路由。借助路由，我们可以将应用程序的任何部分链接到所提供的路由。

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更改，路由都会自动调用特定的控制器功能。