Ext.fly vs Ext.get

[kris]

Hello

I'm wondering what is the cost of creating an element on-the-fly comparing to cached call (Ext.get) - in terms of memory and performance overall.
I've just noticed that Event.getTarget use Ext.get, and with QuickTips enabled after a few cursor moves half of all my html elements get cached, even if they have nothing to do with extjs (or qtips).

Regards
kris

[jack.slocum]

Ext.fly desn't cache any elements. It reuses the same Ext.Element object for use with multiple DOM elements. Ext.get creates a new Ext.Element object for each DOM element.

Overall the use of Ext.get vs fly won't effect performance that much, but it makes sense to use less memory when possible.

QuickTips wouldn't be caching anything, they use the flyweight (http://en.wikipedia.org/wiki/Flyweight_pattern)version.

[kris]

Hi Jack

I was referring to this code in Ext.EventObjectImpl


getTarget : function(selector, maxDepth, returnEl){
var t = Ext.get(this.target);
return selector ? t.findParent(selector, maxDepth, returnEl) : (returnEl ? t : this.target);
}

and this call from QuickTip:



onTargetOver : function(e){
if(this.disabled){
return;
}
this.targetXY = e.getXY();
var t = e.getTarget();
...
}


when QuickTips are enabled, the latter is invoked by mouseover event for any elem on the page. e.getTarget always use Ext.get internally whether it returns Ext.Element or not.
Now I'm thinking that it might be more efficient to return event.target directly, when returnEl == false (just like in my quicktips case)

Regards
kris

[kris]

To be honest my motivation to digg into this was slightly different. I'm using Selenium IDE to record tests for my gui, and I noticed that 'id' attribute pop ups from nowhere before I manage to click on the element :).
Because this tool by default use existing 'id' as a selector, it can be a bit annoying (if id is not predefined, auto-generated values are useless for tests). I can imagine that the same problem can occur with other similar tools (QTP for example).

[jack.slocum]

getTarget : function(selector, maxDepth, returnEl){
var t = Ext.get(this.target);
return selector ? t.findParent(selector, maxDepth, returnEl) : (returnEl ? t : this.target);
}


That's a recent change that will be rolled back.

[jack.slocum]

This is changed in SVN.