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

作者:terry,如若转载,请注明出处:https://www.web176.com/senchatouch/1643.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年1月22日 下午6:15
下一篇 2021年1月25日 下午8:54

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注