sencha-touch - callParent 有什么用

Question

我经历过这个online tutorial了解 Sencha 触摸的基本概念。现在，我确信我可以期待以我的知识开始为真正的项目编码。

但我对 this.callParent(arguments) 的功能有疑问作者在教程中使用。

我知道这个名字清楚地表明 “正在调用它的父类” .
但我有这样的问题:(与教程相关)

为什么我们要调用父类？

这会再次完全运行父类吗？

请帮我理解 callParent与上述教程有关。

我已经通过 touch docs我无法理解。 (对于作者的代码，我的解释似乎完全不同)。

Project download link

Answer 1

正如您在问题中提到的 this.callParent(arguments)调用父类(super class)中的相应函数。

那就是调用this.callParent(arguments)在构造函数中调用正在扩展的父类(super class)的构造函数。

在您提到的教程中，这就是作者所做的。

launch: function () {
  //This line simply calls the super class(Ext.app.Controller) launch function  
  this.callParent(arguments);
  var notesStore = Ext.getStore("Notes");
  notesStore.load();
  console.log("launch");
},

 init: function () {
  // This line simply calls the super class(Ext.app.Controller) init function   
  this.callParent(arguments); 
  console.log("init");
 }

但是他为什么这样做，我不确定，因为没有必要调用 Ext.app.Controller。类(class) init和 launch该教程中的功能。

让我举例说明

1) 创建名为 Main 的父类(super class)

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    launch: function () {
       console.log("Main launch");
    },      

    init: function () {
       console.log("Main init");
    },    

    config: {

    } 
});

2) 创建子类 SubMain扩展 MyApp.controller.Main

Ext.define('MyApp.controller.SubMain', {
    extend: 'MyApp.controller.Main',

    launch: function () {
        this.callParent(arguments);
       console.log("launch");
    },

     init: function () {
        this.callParent(arguments);
       console.log("init");
     },

    config: {
    }
});

现在，当您运行应用程序时，我们放置在父类(super class)和子类中的 console.log 将在浏览器控制台中打印以下内容

输出

Main init 
Main init 
SubMain init 
Main launch 
Main launch
SubMain launch 

我们知道，当我们启动应用程序 init和 launch每个 Controller 的功能将被调用一次。

但是，你看到 Main init 和 Main 启动函数被调用了两次，为什么？

之所以再次调用父类(super class)的init和launch函数是因为我们放置了 this.callParent(arguments);在 init and launch SubMain的功能，即调用 Main的init和launch函数(超类)再次上课。

还有更多，arguments呢？通过 callParent功能

arguments是一个特殊的参数。

现在，让我们举个例子来测试一下

Ext.define('Mail.controller.Messages', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            viewer: 'messageviewer',
            messageList: 'messagelist'
        },
        control: {
            messageList: {
                itemtap: 'loadMessage'
            }
        }
    },

    loadMessage: function(item) {
        this.getViewer().load(item);
    }
});

Mail.controller.phone.Messages类扩展 Mail.controller.Messages ，这仅仅意味着所有的配置和功能都是继承的。

 Ext.define('Mail.controller.phone.Messages', {
    extend: 'Mail.controller.Messages',

    config: {
        refs: {
            main: '#mainPanel'
        }
    },

    loadMessage: function(item) {
        // Without this line loadMessage function of super class will not be invoked
        this.callParent(arguments);
        this.getMain().setActiveItem(1);
    }
});

现在，当用户在 messageList 中的项目上单击时 loadMessage Mail.controller.phone.Messages中的函数类将被调用。

我们还放置了 this.callParent(arguments);在 loadMessage函数，所以首先 Mail.controller.Messages类(class) loadMessage函数将被调用，然后 this.getMain().setActiveItem(1);行将运行。

如前所述 loadMessage Mail.controller.Messages中的函数在您放置 this.callParent(arguments); 之前不会被调用在 loadMessage功能在 Mail.controller.phone.Messages类(class)。

请注意 item参数将只传递给 loadMessage Mail.controller.phone.Messages的功能, 但是 loadMessage Mail.controller.phone.Messages的功能仍然得到 item论据，如何？

这是因为 arguments你通过了 this.callParent loadMessage 内的函数 Mail.controller.phone.Messages的功能类(class)。