PDA

View Full Version : Observable Tutorial/Example



cboden
13 May 2008, 2:19 PM
I think I'm looking for a tutorial on Ext.util.Observable. I think it's safe to say I probably suck at searching :(.

My code is looking like this so far:


myClass = function(cfg) {
Ext.apply(this, cfg);
this.addEvents({
addItem: true;
});

// other stuff
}

Ext.extend(myClass, Ext.util.Observable, {
// some methods that do stuff
});

Ext.namespace('myApp');
myApp = new myClass({ /* stuff goes here */ });



In the class I want to have methods triggered when things occur, such as an object is added to the instance of the class. Am I at least on the right track?

evant
13 May 2008, 4:07 PM
You need to call the superclass:



MyClass = function(config)
{
this.addEvents('additem');
MyClass.superclass.constructor.call(this, config);
};

Ext.extend(MyClass, Ext.util.Observable,
{
someMethod: function()
{
this.fireEvent('additem');
}
}
);

devnull
13 May 2008, 4:16 PM
Yep I think you are on the right track.
I will add a little and ask more questions :)


myClass = function(cfg) {
Ext.apply(this, cfg);
this.addEvents({
addItem: true;
});

// other stuff
}

Ext.extend(myClass, Ext.util.Observable, {
add: function(){
//do whatever 'add' is supposed to, then...
var arg1 = 'blah';
var arg2 = 123;
//fire the event:
this.fireEvent('addItem', arg1, arg2);
});

var myItem = new myClass({ /* config */});
myItem.on('addItem', function(arg1, arg2){
//do something...
});

my question is, why isnt the 'listeners' config respected like it is in other observable based components?
this should be the same:


var myItem = new myClass({
listeners: {
addITem: function(arg1, arg2) {
//do something
}
}
})

Animal
14 May 2008, 12:31 AM
Because you didn't do what you were told and call the superclass constructor.

Animal
14 May 2008, 12:33 AM
Or it's the Typo: "addITem".

Case sensitive.

cboden
14 May 2008, 5:36 AM
Thank you everyone for the input.

Is there a tutorial/explanation anywhere on superclass? I'd like to know what it is/how it works, beyond knowing "this call is needed to work".

I recall only being able to find a quick bit about it saying that the superclass pointer was how Ext classes references their parent class.

Thanks.

mjlecomte
14 May 2008, 5:57 AM
I'd have a look at
http://extjs.com/learn/w/index.php?title=Ext_2_Overview&section=6 (see Component Life Cycle, I don't know how to link to the subsection)

Also review the 3 or 4 tutorials on extending. Basically to maintain the functionality that the parent class offers you need to call on it. If you override a method and don't call the parent then you lose whatever the parent was doing. That's my crude synopsis anyway.

Most of the tutorials are about extending components which I gather is slightly different from Observable which doesn't follow the same Life Cycle. But the point about calling the parent I think is still valid for the context you're asking about.

Animal
14 May 2008, 6:41 AM
It's like any other language in that the superclass's constructor must be called to make the subclass have the basic initialization of the class it's extending.

Except that where Java (for example) will insert the "super()" call for you if you don't explicitly call the superclass, in Javascript, it's more flexible. It allows you not to call the superclass constructor. Because the whole inheritance concept is merely a programmed convention in Javascript.

devnull
14 May 2008, 7:04 AM
Ahh I see. The code I posted was actually taken from another example, i have very little experience with extending classes so far (obviously). The typo was just that, a typo.