View Full Version : [SOLVED] How to use an Extended Class (Simple Question)

8 Jun 2010, 8:23 AM
Hello, everybody.

This is my example:

var MyDropTarget = new Ext.Extend(Ext.dd.DropTarget,

notifyDrop: function(source, e, data){
alert('Dropped in DropTarget!');

);What do I have to write if I want to use a new DropTarget?

The normal usage was:

new Ext.dd.DropTarget('my_div', center_div);But can I use "MyDropTarget"? I can't find the correct syntax...


8 Jun 2010, 12:02 PM
var MyDropTarget = Ext.extend(Ext.dd.DropTarget,

notifyDrop: function(source, e, data){
alert('Dropped in DropTarget!');

var aNewDropTarget = new MyDropTarget();

This should work.

8 Jun 2010, 12:56 PM
Have you looked at this (http://www.extjs.com/learn/Tutorial:Extending_Ext_for_Newbies).

9 Jun 2010, 5:01 AM
Thanks a lot!

Now it works! And I haven't noticed that there was a beginner tutorial instead of http://www.extjs.com/learn/Tutorial:Extending_Ext_Class which gave me some trouble.


Can I ask you another thing?

This is the code from the first Example.

// MyPanel Extends Ext.Panel
MyPanel = Ext.extend(Ext.Panel, {
// constructor function
constructor: function(config) {
Ext.apply(this, {
// Put your pre-configured config options here
width: 300,
height: 300
MyPanel.superclass.constructor.apply(this, arguments);

var myfirstpanel = new MyPanel({
title: 'My First Panel'

var mysecondpanel = new MyPanel({
title: 'My Second Panel'

Although I still can't exactly get what "apply" does and what is "config" input parameter in the consturctor function... I made this one work.

But what I was wondering is what could be wrong with this other implementation of mine that's not working:

MyComponentPanel = new Ext.extend( Ext.Panel, {
// config items
items: [{
text: 'Hello'

9 Jun 2010, 10:45 PM
apply is your friend. Get used to using this often. Config is the js object that you specify to configure the component.

apply/applyIf is like merging two objects together using reflection.

The items you specify here does not work because I believe you are overwriting the parameter rather than sending it in. You will have to look into the items code.

9 Jun 2010, 11:42 PM
apply is your friend. Get used to using this often. Config is the js object that you specify to configure the component.

apply/applyIf is like merging two objects together using reflection.

So, for example, in:

Ext.Msg.show({title:'Hello'}); the config is {title:'Hello'}? If it is so, I'm starting to get it.

May I also ask what does this line is intended to do? Shouldn't it be the "config" item instead of the "arguments" array?

MyPanel.superclass.constructor.apply(this, arguments);I also tried to read something about the apply method. Is it like a way to force some config parameters to be overwritten?

Here's the documentation of Exy.apply

apply (http://www.extjs.com/deploy/dev/docs/source/Ext.html#method-Ext-apply)( Object obj, Object config, Object defaults ) : ObjectCopies all the properties of config to obj.
Copies all the properties of config to obj.Parameters:

obj : ObjectThe receiver of the properties
config : ObjectThe source of the properties
defaults : ObjectA different object that will also be applied for default values


Objectreturns obj

But the third parameter is optional? And what is that intended to be?
Sorry but I've seen lots of example over the web and extjs site, but I can't exactly get when I use to need it and what it exactly does..

Thanks for your patience, CrazyEnigma! :)

10 Jun 2010, 5:59 AM
Hi BlueSkye,

I think I solved your problem, so [SOLVED] or [CLOSED] in your original post's title would be appropriate at this point.

In response to your other questions:
I believe arguments is a special keyword, that takes all arguments from the input parameters of the method, and uses them in order.

So if you had a function that takes 3 arguments, then they will be mapped according to the values you set when calling the parent method. So even though, you did not specify or expose the arguments, you can send more arguments than the method needs. This article (http://www.seifi.org/javascript/javascript-arguments.html) might help you out in understanding this better. This is one of the features of a dynamic language such as javascript.

Your latter question, which is another feature of a dynamic language:
There are three ways that you can set the values within an object.

var obj = {
foo: "bar"

Even after you specify this object you can specify more properties with:

obj.hello = "world";
obj["name"] = "value";

You can call all three properties:


Ok now with the config, if the user has specified a config file or not, and you want to override them or specify them to pre-configure your component, the apply() method is useful. Let's take two properties for the sake of simplicity width and height.

// User specifies width in the call, but you need width and height
var config = {width: 400};
var outputConfig = {};
Ext.apply(outputConfig, config, {width: 120, height: 300});
// outputConfig should now have two parameters width and height.
alert(outputConfig.width); // 400
alert(outputConfig.height); // 300

Hope this helps.

11 Jun 2010, 8:51 AM
Thanks a lot CrazyEnigma. I'll take some time to clear my thoughts on the subject, but your help has been really useful!

(also "solved" the thread ;) )