PDA

View Full Version : superclass.initComponent.apply, what for?



afortaleza
30 Apr 2011, 6:02 AM
On the videos I've seen about views on Sencha Touch, there's always a line like this at the end of the initComponent function.


app.Viewport.superclass.initComponent.apply(this, arguments);

What I understand is that "apply" works like a clone method, but what i the purpose of cloning the entire current object on the superclass?

thank you
Anderson Fortaleza

jratcliff
30 Apr 2011, 6:16 AM
Don't confuse this with Ext.apply() which copies properties from an object into another object. In this context, apply is the native javascript method that all functions have and it allows you to call a function and change the scope (what 'this' refers to inside the function). Function.apply() and Function.call() are similar and you will see both being used throughout the framework with the difference being how arguments are passed in.

Here's more info for you

Apply
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/function/apply

Call
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/function/call

afortaleza
30 Apr 2011, 6:24 AM
Thank you for the information (and quick reply), I'll study the material you refereed to to understand what's going on there :)

thank you
Anderson Fortaleza

afortaleza
30 Apr 2011, 6:44 AM
Ok, I got it, after some reading. So, what this is doing is calling the initComponent() of the base view passing the current view as the scope, that is, all the instructions on the function will be executed on the context of the current object.

It's like calling base() on c# or super() in java.

thank you
Anderson Fortaleza

mitchellsimoens
30 Apr 2011, 10:35 AM
Remember, only override functions that you need to so if you are not going to do something within the initComponent then don't override it. If you are going to, such as putting items or dockedItems into the Component, then you should do it this way:


myClass = Ext.extend(Ext.Panel, {
...
initComponent: function() {
...
myClass.superclass.initComponent.call(this);
}
});

afortaleza
30 Apr 2011, 2:03 PM
Thank you Mitchel, when I used sencha command the template for the Viewport was generated using apply and not call, constructors for components used as Viewport have no parameters on their constructors? This is why you suggested using call?

Another questin I have is, I've seen on the sencha touch video explaining how to use the TabPanel (http://vimeo.com/22251762) that Drew Neil adds items to his view not on the initComponent() method but on the class body itself, what is the advantage of using the initComponent method?

thx
Anderson Fortaleza

afortaleza
30 Apr 2011, 3:48 PM
A quick google search got me the answer right here on sencha forums :)

http://www.sencha.com/forum/archive/index.php/t-22300.html

cheers
Anderson Fortaleza

vahidrajaei
18 Apr 2012, 4:54 AM
Hi Friends

How to show the function below on a fieldset or a panel?

initComponent: function (){

Some variables and photo that I want to show

return App.views.viewname.superclass.initComponent.apply(this, arguments);
}

any help please