Hello all, this is my very first post. First of all, I am in awe of ext-js. It is well designed, easy to use, easy to blend with other libraries (even home-brewed). Thanks Jack, it has been a pleasure to dive into your source to learn how it works.
I am having an issue trying to setup global hotkeys for a page that contains an iframe. I am attempting to bind a keymap to the main document and another one to the iframe's contentDocument. Everything's well when I bind it to document, but when I try to to bind it to the iframe's document I get an exception saying:
this.el has no properties
Error Line: this.el.on(this.eventName, this.keyDownDelegate);
I have already made sure that I am passing a valid document object by printing it out to firebug's console.
There's an easy way to reproduce this problem:
Go to http://extjs.com/deploy/ext/docs/index.html (Using FF and Firebug)
Try to bind 'n' to the documentation iframe by typing the following into the console:
Code:
new Ext.KeyMap(document.getElementById('main').contentDocument,{ key: 'n', fn: function() {console.log("Hit n")}})
Notice that it doesn't work. If you pass it the standard document object, it works fine.
I've tracked this down to the following lines in El.get().
Code:
}else if(el == document){
if(!docEl){
var f = function(){};
f.prototype = El.prototype;
docEl = new f();
docEl.dom = document;
}
return docEl;
}
return null;
That seems to create a global element to use when a document is passed in. However, if we pass a different document (iframe's), it will fall out and return null which is what is causing the 'has no properties' error.
I am trying to see what can be done to workaround this but I figured I'd post it here in case anyone has some ideas.
Thanks.