Forums

Hi I want to extend overlay. My code is as follows:



And I wanted to use like:

var mask = new Mask(container);
mask.overlay.show() etc.

But I am getting error says:

R.NAME is undefined IN widget-min.js (line 8)

What I am doing Wrong. Please help.

Thanks

Many Thanks Nick.

So, Basically we can't extend overlay module as I did, we need to use the widget lifecycle, right ?

You're getting the error because the object you're calling the Overlay constructor with doesn't have a static NAME property associated with its constructor. It's just a plain object, making its constructor Object. It looks like you forgot to pass 'this' as the first argument.

It looks like you're mixing two ideas: 1) composition (aka, "has a"), and 2) extension (aka, "is a").

On the one hand, you want to create an object (Mask instance) that *has a* property which is an instance of Overlay. On the other, you want the Mask instance to *be* an Overlay. Extension should be sufficient. No need to store this.overlay.

There is another issue. Namely, you're creating a div off the DOM tree and binding to it as your srcNode and calling render(). I don't recall if Widget is nice enough to attach the srcNode to the document if it isn't already, but I don't think it does. That means your new mask Overlay is off DOM, and therefore will not be visible.

Regional modal masking is an interesting use case. Have you looked at the WidgetModality extension? http://yuilibrary.com/yui/docs/api/clas ... ality.html (you can see how it's used in the Panel source and user guide).

"return this" it's already implied in constructors. It's not necessary to write it.

What you did is the "manual" way of doing inheritance in YUI. You can also use Y.Base.create. Ie: