PDA

View Full Version : Abstract Class General Question



mdavis6890
31 Dec 2010, 9:40 AM
I have seen three different ways to describe configuration options in a typical abstract class:



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

OR

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

OR

myClass = Ext.extend(Ext.superclass, {
initComponent : function() {
var config = {
myConfigOption : 'option',
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
myClass.superclass.initComponent.call(this);
}
});


So which one should I be using, when, and why? I assume that each serves a slightly different purpose, so please help me understand so that I can choose properly for each situation.

Please forgive any syntax errors. Above code was typed by hand and not intended to be executed.

Best,
Michael

aconran
31 Dec 2010, 11:50 AM
When subclassing any key/value pair within the 2nd object of the Ext.extend will be applied to the prototype of the new class.

So therefore in your first example, you are adding myConfigOption to the prototype of "myClass". This configuration will be shared across all instances of myClass, (unless it is being shadowed by an instance variable).

In your second example, you are setting myConfigOption directly to the instance.

In the third example, you are copying myConfigOption directly to the instance AND to the initialConfig object.

In general, the first technique is preferable and the most clean. In Ext 3 there are a few rare cases where we rely on initialConfig being populated with these values. In Ext4 we are eliminating that reliance on initialConfig.

mdavis6890
31 Dec 2010, 12:41 PM
A very helpful explanation, thanks.

So to take a more specific example, suppose that we're talking about extending Ext.form.TextField and it's 'width' property.

I'm still not completely clear on the ramifications of choosing 1 vs 2.

IOW

...
width : 100,
initComponent: function() {
...

...
initComponent: function() {
Ext.apply(this, {
width: 100
});
...

Both seem to have the same net result for subclass instances, inasmuch as they'll all have width=100.

So is there any real difference? I see them used both ways all the time, sometimes for different properties of the same Ext class, so I have to believe there's a reason.

Best,
Michael

skirtle
31 Dec 2010, 2:47 PM
Where possible you'd go for the first technique because it is much, much neater. Compare:


var MyTextField = Ext.extend(Ext.form.TextField, {
width: 100
});with:


var MyTextField = Ext.extend(Ext.form.TextField, {
initComponent: function() {
Ext.apply(this, {width: 100});
MyTextField.superclass.initComponent.call(this);
}
});Technique 1 is great for primitive types but for reference types (objects, arrays, etc.) you generally shouldn't put them on the prototype because they'll be shared between all instances of your class. In that case you'd have to resort to technique 2.

You should also consider the case where you want to subclass MyTextField. If both classes use technique 1 this is really easy:


var YourTextField = Ext.extend(MyTextField, {
width: 150
});But if MyTextField had been created using technique 2 then you can't easily set the width to 150 because it sets it back to 100 again just before it gets rendered.

mdavis6890
31 Dec 2010, 5:09 PM
This is great stuff. I really appreciate the time.

Michael