PDA

View Full Version : Resizable, Draggable & KeyListener



mcohnen
23 Oct 2007, 11:58 PM
Hi, I am playing with resizable and draggable and now i face the following problem: I want to be able to move my draggable object with arrows keys. but i am not able to fire addKeyListener event. I am using custom object of resizable examples. This is what i added:

var custom = new Ext.Resizable('custom', {
wrap:true,
pinned:true,
minWidth:50,
minHeight: 50,
preserveRatio: true,
handles: 'all',
draggable:true,
dynamic:true
});
var keyFn = function(){
alert("pressed");
}
var customEl = custom.getEl();
customEl.addKeyListener(38,ResizableExample.keyFn,ResizableExample); What am i doing wrong? Thank you for your help!!

brian.moeskau
24 Oct 2007, 12:02 AM
Have you tried adding your element to a KeyMap?

http://extjs.com/deploy/dev/docs/?class=Ext.KeyMap

mcohnen
24 Oct 2007, 12:23 AM
Thank you for your reply, but i still can not make it work.

I added
// map one key by key code
var map = new Ext.KeyMap("custom", {
key: [10,13],
fn: function(){ alert("Return was pressed"); }
});
but no results.

What i miss about keyListener is EL argument. If this argument is a window, it has sense that if the window is focussed, the listener works, and otherwise it doesnt. So what should i use as EL argument in my case, where i want to move a draggable and resizable box? Is there a way to refer to the whole site?

Thank you!

tryanDLS
24 Oct 2007, 8:12 AM
Do you mean want to handle those keys when the focus is somewhere besides your element? You could try document or maybe document.body