PDA

View Full Version : Element.on documentation?



staticboy
8 Aug 2007, 5:11 AM
Having only just started using Ext within the last hour I am definately in the "newbie" class, but I'm no beginner to HTML/DOM/JavaScript, etc. I can't seem to find the documentation concerning the Element.on method?

I'm running through the Tutorial:Introduction to Ext (http://extjs.com/learn/Tutorial:Introduction_to_Ext) and got to the Responding to Events (http://extjs.com/learn/Tutorial:Introduction_to_Ext#Responding_to_Events) section which has the following sample code:


Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("You clicked the button");
});
});

If I'm reading this right the Ext.get method returns an Element object from which the on method is being called to define an onClick event handler. I understand this, I just can't find the documentation about the on method!

Help! But try not to make me look like a total *****...

8 Aug 2007, 7:27 AM
http://extjs.com/deploy/ext/docs/output/Ext.util.Observable.html

no one will call u names here, we dont flame.

staticboy
8 Aug 2007, 7:53 AM
Perfect, thank you! Now that I know this is part of the Ext.util.Observable class it all makes sense (well, more sense than it did a couple of hours ago).

bmf1972
8 Aug 2007, 8:53 AM
How is Observable linked to Element?!
I looked again into the Element documentation and it does not seem to inherit Observable...

RWaters
8 Aug 2007, 11:09 AM
I don't believe Observable is directly linked to Element. They just follow the same syntax. 'on' is just shorthand for 'addListener' which in turn uses Ext.EventManager to add events.

para
8 Aug 2007, 11:15 AM
This is lines 2664-2677 of Element.js


var ep = El.prototype;

/**
* Appends an event handler (Shorthand for addListener)
* @param {String} eventName The type of event to append
* @param {Function} fn The method the event invokes
* @param {Object} scope (optional) The scope (this object) of the fn
* @param {Object} options (optional)An object with standard {@link Ext.EventManager#addListener} options
* @method
*/
ep.on = ep.addListener;
// backwards compat
ep.mon = ep.addListener;

bmf1972
8 Aug 2007, 11:24 AM
Well... That's amazing!... Really! I am spending almost two days trying to figure this stuff out!...
How have you find these lines?

Still, there is something missing...
Where is that El and its prototype? Where is that documented?
And, finally, how is that El and Element connected?

Is there a way to debug step-by-step the construction of these objects?

para
8 Aug 2007, 11:55 AM
El is simply a shortcut to Ext.Element, to save character space.
Element.js line 106:

var El = Ext.Element;


Element.js line 108-2663:

El.prototype = {
...
};


What are you trying to do?

bmf1972
8 Aug 2007, 10:52 PM
I am just trying to understand this beast ;-)

The documentation does not mention these shortcuts -- somewhat annoying for newbies like me...

bmf1972
8 Aug 2007, 11:42 PM
Yet another issue...
Where Ext.get is defined? The docs say that it is a shortcut for Ext.Element.get, and I can find that method in Element.js, however I cannot find that shortcut in Ext.js :-/

evant
8 Aug 2007, 11:49 PM
From the source:



var El = Ext.Element;
//......... //
/**
* Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
* Automatically fixes if an object was recreated with the same id via AJAX or DOM.
* Shorthand of {@link Ext.Element#get}
* @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
* @return {Element} The Element object
* @member Ext
* @method get
*/
Ext.get = El.get;

para
9 Aug 2007, 3:43 AM
El.get actually defines the function. Ext links to it.

The best way to learn Ext is to use it on a project that is way out of your league. I've been working for 5 months on a project that is very complicated. It is a stretch considering I'd only used JS to redirect HTML and play sounds :)


Element.js lines 2738-2790

/**
* Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
* Automatically fixes if an object was recreated with the same id via AJAX or DOM.
* @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
* @return {Element} The Element object
* @static
*/
El.get = function(el){
var ex, elm, id;
if(!el){ return null; }
if(typeof el == "string"){ // element id
if(!(elm = document.getElementById(el))){
return null;
}
if(ex = El.cache[el]){
ex.dom = elm;
}else{
ex = El.cache[el] = new El(elm);
}
return ex;
}else if(el.tagName){ // dom element
if(!(id = el.id)){
id = Ext.id(el);
}
if(ex = El.cache[id]){
ex.dom = el;
}else{
ex = El.cache[id] = new El(el);
}
return ex;
}else if(el instanceof El){
if(el != docEl){
el.dom = document.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
// catch case where it hasn't been appended
El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it
}
return el;
}else if(el.isComposite){
return el;
}else if(el instanceof Array){
return El.select(el);
}else if(el == document){
// create a bogus element object representing the document object
if(!docEl){
var f = function(){};
f.prototype = El.prototype;
docEl = new f();
docEl.dom = document;
}
return docEl;
}
return null;
};

Element.js lines 2867-2876

/**
* Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
* Automatically fixes if an object was recreated with the same id via AJAX or DOM.
* Shorthand of {@link Ext.Element#get}
* @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
* @return {Element} The Element object
* @member Ext
* @method get
*/
Ext.get = El.get;

staticboy
17 Aug 2007, 2:56 AM
The best way to learn Ext is to use it on a project that is way out of your league.

So true! For the complete package make sure you've got a really tight deadline too...

K0bo
17 Aug 2007, 6:02 AM
Why don't you search the source code?
I get most of my answers that way :)