As you mentioned in your question, this.callParent(arguments) calls the corresponding function in the superclass.
This call to this.callParent(arguments) in the constructor invokes the constructor of the superclass, which expands.
In the textbook you talked about, this is what the author does.
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"); }
But why he does this, I'm not sure, because there is no need to call the Ext.app.Controller class init and launch function in this tutorial.
Let me explain with an example.
1) Creating a Main superclass
Ext.define('MyApp.controller.Main', { extend: 'Ext.app.Controller', launch: function () { console.log("Main launch"); }, init: function () { console.log("Main init"); }, config: { } });
2) Create a subclass of SubMain that extends 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: { } });
Now, when you launch your application, the .log console that we placed in the super and subclass will be printed as follows in the browser console.
Exit
Main init Main init SubMain init Main launch Main launch SubMain launch
As we know, when starting the init and launch application, the function of each controller will be called once.
But you see that the Main init and Main function are run twice, Why?
The reason it is again called the start and start function of the super class is because we put this.callParent(arguments); in the init and launch function, SubMain , which calls the init function and start the Main class (superclass) again.
There is more that about arguments that passed in the callParent function
arguments is a special parameter.
Now let's take an example to test
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 class extends Mail.controller.Messages , it just means that all configurations and functions are inherited.
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); } });
Now, when the user inserts a tab into the element in the messageList , the loadMessage function in the Mail.controller.phone.Messages class will be called.
We also put this.callParent(arguments); into the loadMessage function, so the first function Mail.controller.Messages class loadMessage will be launched, and then this.getMain().setActiveItem(1); .
As mentioned earlier, the loadMessage function in Mail.controller.Messages will not be called until you put this.callParent(arguments); in loadMessage in the class Mail.controller.phone.Messages .
Note that the item argument will only be passed to the loadMessage Mail.controller.phone.Messages function, but the loadMessage Mail.controller.phone.Messages function still receives the item argument, How?
Because of the arguments you passed this.callParent function in the loadMessage function of the loadMessage class.