Ext.id and the global id variable

[mankz]

I just studied the Ext.id function, which is causing the "id" variable to end up on the window object.

The problem, as I understand it, is that this function both generates AND assigns the generated id to the el. This function is used for both ext Elements and the window object. Since changing it will probably have a huge impact, maybe the code below can remove the id variable?

Proposed change (in EventManager):

(another thing, the commented row below, where is the id property used, can it be removed?)


var addListener = function(el, ename, fn, wrap, scope){
var id = (el === window) ? "window" : Ext.id(el);
if(!elHash[id]){
elHash[id] = {};
}
var es = elHash[id];
if(!es[ename]){
es[ename] = [];
}
var ls = es[ename];
ls.push({
id: id, // Where is this id property used??
ename: ename,
fn: fn,
wrap: wrap,
scope: scope
});

E.on(el, ename, wrap);

if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
el.addEventListener("DOMMouseScroll", wrap, false);
E.on(window, 'unload', function(){
el.removeEventListener("DOMMouseScroll", wrap, false);
});
}
if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
Ext.EventManager.stoppedMouseDownEvent.addListener(wrap);
}
}

var removeListener = function(el, ename, fn, scope){
el = Ext.getDom(el);

var id = (el === window) ? "window" : Ext.id(el),
es = elHash[id],
wrap;
if(es){
var ls = es[ename], l;
if(ls){
for(var i = 0, len = ls.length; i < len; i++){
l = ls[i];
if(l.fn == fn && (!scope || l.scope == scope)){
wrap = l.wrap;
E.un(el, ename, wrap);
ls.splice(i, 1);
break;
}
}
}
}
if(ename == "mousewheel" && el.addEventListener && wrap){
el.removeEventListener("DOMMouseScroll", wrap, false);
}
if(ename == "mousedown" && el == document && wrap){ // fix stopped mousedowns on the document
Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap);
}
}

var removeAll = function(el){
el = Ext.getDom(el);
var id = (el === window) ? "window" : Ext.id(el),
es = elHash[id],
ls;

if(es){
for(var ename in es){
if(es.hasOwnProperty(ename)){
ls = es[ename];
for(var i = 0, len = ls.length; i < len; i++){
E.un(el, ename, ls[i].wrap);
ls[i] = null;
}
}
es[ename] = null;
}
delete elHash[id];
}
}

[jay@moduscreate.com]

mankz, what value would this change add?

[mankz]

Cleaner global namespace, that's all

[vpopa]

I was doing some refactoring in the code and by mistake I've ended up using the id variable from the global space(window.id) instead of getting a normal error like "id is not defined".
"id" is a common name of variable and it might be used often. Sometimes as humans we forget thinks like declaration of variables.
So I ended up having two panels with the id "ext-window" (the same id - this was the problem) and it took me a while to undestand the problem.
Getting rid of the id from the global space would be a good for the business :)

Vali

[xjpmauricio]

Hi, i've been having a similar problem. If i load a html template using extjs, every object on the page wich does not have an id, will get one automatically...the usual nomenclature ext-gen, etc.