4

我通过这个在线教程了解了 Sencha touch 的基本概念。现在，我确信我可以期待以我的知识开始为真正的项目编码。

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

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

  • 为什么我们要调用父类？
  • 这会再次完全运行父类吗？

请帮助我了解callParent与上述教程相关的内容。

我已经阅读了我无法理解的触摸文档。（对于作者的代码，我的解释似乎完全不同）。

项目下载链接

4

1 回答 1

19

正如您在问题中提到的那样，this.callParent(arguments)调用超类中的适当函数。

即this.callParent(arguments)在构造函数中调用调用正在扩展的超类的构造函数。

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

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类init和函数。launch

让我用例子来解释

1）创建超类称为Main

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

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

输出

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

众所周知，当我们启动应用程序时init，launch每个控制器的功能都会被调用一次。

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

之所以再次调用超类的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.Messagesclass extends 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类函数，然后运行行。loadMessagethis.getMain().setActiveItem(1);

如前所述，loadMessage函数 inMail.controller.Messages将不会被调用，直到您this.callParent(arguments);在类中放置loadMessage函数。Mail.controller.phone.Messages

请注意，item参数只会传递给loadMessagefunction of Mail.controller.phone.Messages，但loadMessagefunction ofMail.controller.phone.Messages仍然会获取item参数，如何？

这是因为你在类的函数中arguments传入了this.callParent函数。loadMessageMail.controller.phone.Messages

于 2013-08-01T20:00:55.543 回答