View Full Version : Help understanding code: BasicDialog.js - LayoutDialog

31 Jan 2007, 7:07 AM

I'm trying to understand what 'alwaysShowTabs' is doing in the LayoutDialog method.

In BasicDialog.js starting at line 898 I see this:

YAHOO.ext.LayoutDialog = function(el, config){
config.autoTabs = false;
YAHOO.ext.LayoutDialog.superclass.constructor.call(this, el, config);
this.body.setStyle({overflow:'hidden', position:'relative'});
this.layout = new YAHOO.ext.BorderLayout(this.body.dom, config);
this.layout.monitorWindowResize = false;
// fix case when center region overwrites center function
this.center = YAHOO.ext.BasicDialog.prototype.center;
this.on('show', this.layout.layout, this.layout, true);

I get lost at line 900:

YAHOO.ext.LayoutDialog.superclass.constructor.call(this, el, config);

Where do I go to follow what this line is doing?

31 Jan 2007, 7:19 AM
Couldn't you just put a breakpoint at line:

YAHOO.ext.LayoutDialog.superclass.constructor.call(this, el, config);

and STEP INTO it?

31 Jan 2007, 7:22 AM
This thread might provide some help: http://www.yui-ext.com/forum/viewtopic.php?t=536

But the line in question calls the superclass's constructor - which is YAHOO.ext.BasicDialog. The LayoutDialog is a BasicDialog. It just has a few extra bits of furniture and functionality, so the setup of BasicDialog must be done.

The superclass is set up by the YAHOO.extendX (It calls YUI's YAHOO.extend to do that), and unlike Java, a subclass has to manuall call the superclass's constructor to ensure that initialization of the superclass is performed.

As for the parameters, you'll need to understand the Function object:


You'll need a Javascript book really....

31 Jan 2007, 9:02 AM
Thanks Animal, that makes sense -- for the most part. (The way JavaScript does classical inheritance is still a tad confusing :? )

So then a few lines down there is:

YAHOO.extendX(YAHOO.ext.LayoutDialog, YAHOO.ext.BasicDialog, { ...

Where is that invoked?
I would think that extendX would have to be invoked from the LayoutDialog method before it calls superclass's constructor.

31 Jan 2007, 9:09 AM
The pattern is

1) declare the superclass (parent)
2) declare the descendant class construtor and invoke the superclass constructor in it.
3) immediately call extendX to add the descendant overrides additions to the object chain of the parent.

In the Javascript newbies thread, one of those links is a discussion of how the inheritance in JS works. It's not specific to yui/yui-ext, but the same things apply.

1 Feb 2007, 12:03 AM
Where is that invoked?

That line is invoking it statically - it's a call to YAHOO.extendX... see that parenthesised arg list!

It's telling it to set up the superclass, and superclass.constructor property in LayoutDialog (arg1 - the consutructor function declared above) from BasicDialog (arg 2).

And to copy all the properties from the following anonymous object (arg 3 - A collection of functions) into the LayoutDialog's prototype (all instance of objects created from a constructor access a shared prototype, so all instances of LayoutDialog get those functions you see below that line)

It's saying "LayoutDialog extends BasicDialog and implements {<this set of methods>}"

1 Feb 2007, 9:04 AM
Aha! Thanks gang, I got it!

I'll never claim that I pay attention to detail :oops:

When I looked at:
YAHOO.extendX(YAHOO.ext.LayoutDialog, YAHOO.ext.BasicDialog, {

My mind thought it saw:
YAHOO.extendX(YAHOO.ext.LayoutDialog, YAHOO.ext.BasicDialog) {

Now it all came together and I understand what's going on :D