PDA

View Full Version : Please explain this snippet from the help section.



Elijah
3 May 2010, 5:08 AM
Would someone please break this down for me. Taken from http://www.extjs.com/learn/Tutorial:Extending_Ext_for_Newbies


// MyPanel Extends Ext.Panel
// I always use var when declaring. Why are you not?
MyPanel = Ext.extend(Ext.Panel, {
// constructor function
// why is the 'config' defined if its not being used?
// I am just trying to understand who was thinking what instead
// of trying to interpret and assume.
constructor: function(config) {
Ext.apply(this, {
// Put your pre-configured config options here
// wont this make the variables global since you did not define var width?
width: 300,
height: 300
});
// What exactly is going on with this call? This part confuses me
// because the example shows that you call the method by
//var myfirstpanel = new MyPanel({
// title: 'My First Panel'
//});
// So what exactly is passed in the 'this' and why if 2
// arguments are specified is the above caller passing only 1?
MyPanel.superclass.constructor.apply(this, arguments);
}
});

cnelissen
3 May 2010, 7:07 AM
I always use var when declaring. Why are you not?

You probably should, unless you are using a namespace. If you define a namespace earlier in code, then you don't need to explicitly call var.


why is the 'config' defined if its not being used? I am just trying to understand who was thinking what instead of trying to interpret and assume.

config in this example is any config data that is passed to the newly extended object. Basically what you are doing in this code is setting default values. This values can still be overwritten when the object is instantiated.


wont this make the variables global since you did not define var width?

No, these variables are being 'applied' to 'this', which is an instance of an object, not global.


What exactly is going on with this call?

You probably need to do some reading up on object oriented programming if you are still having these types of questions. A superclass is the class in which you are extending, in this case Ext.Panel. The constructor method is what is being overridden in this example, so unless you want to completely rewrite all the code for the constructor method in your new class, its usually easier to just create a little bit of new code, and then call the method from the original class, which is what that statement is doing. Like 'execute this new code, and then just run as normal'. Generally this is what you would want to do, but not always, so you have to decide when and where you want to call the method from your superclass.


So what exactly is passed in the 'this' and why if 2 arguments are specified is the above caller passing only 1?

The 'this' is the newly created class, MyPanel. You are not calling the constructor method directly when you are using apply. You are applying your newly overwritten method to the original, appending if you will. Arguments would be the arguments that are called when the method is called in the original class, not your extended class.

Again, I think you need to read over some more basics of OOP before you start digging into this type of stuff.

Elijah
3 May 2010, 9:55 AM
Im coming from a JAVA backend with oop and with the syntax in this JavaScript, I'm just not able to wrap my head around it and map it to what I have done in the past.
With the constructor: function(config) {... I assumed this was overwriting the super constructor which took a config {} of whatever but its just not crystal clear to me what the syntax is telling me.

The inner workings of ExtJS I just dont understand yet and find it frusterating enough that I wish I could just create a darn Flash site instead.

cnelissen
3 May 2010, 3:04 PM
With the constructor: function(config) {... I assumed this was overwriting the super constructor which took a config {} of whatever but its just not crystal clear to me what the syntax is telling me.


The config would be whatever config you pass to your new object. For instance:

var panel = new MyExtendedPanel({
title: 'Some Title',
width: 100,
otherConfig: ...
});

The config object is what is being passed to the constructor. In the extended class you are applying the passed in config object to your default values. After you have setup the constructor and applied any new config options, you then call the constructor method from the superclass. Not too familiar with Java oop, but its similar to other languages that I've used...



The inner workings of ExtJS I just dont understand yet and find it frusterating enough that I wish I could just create a darn Flash site instead.


Just start with something small, it will come to you. Ext really is pretty easy once you wrap your head around it. Hang in there.