need help capture keystrokes of a TextField

[Rewand]

I've got a TextField and I want to trigger an action on every keysroke. I can register blure, change, or specialkey events but I don't see anything that will fire on every keystroke.

I tried to make a Keymap with the following



searchField = new Ext.form.TextField({
maxLength: 40,
grow: false,
selectOnFocus: true
});

new Ext.KeyMap(searchField,{
key:"abcdefg0123456789",
fn:function(){
alert("in keymap");
}
});


But this renders an error in firefox when the page loads.



this.el has no properties.
this.el.on(this.eventName, this.keyDownDelegate);

This was hit on line 6617 of ext-all-debug.js (version 1.0.1)

Eventually I want queue DelayedTask calls to this event handler so that as the user types I can update/highlight elements that match the contents of the textField but I can't even capture the keysroke events.

What am I doing wrong?

[tryanDLS]

I think you need to render the Field first, and pass the keymap and element, not a Field .

[dnixon]

Have you tried adding a key event listener to the dom object?

[Rewand]

I think you need to render the Field first, and pass the keymap and element, not a Field .

OK, so the trick seems to be getting an HTMLElement/Ext.Element to pass to the KeyMap constructor. Idealy this element is bound to the TextField or else I'll get the wrong keyinputs.

I can associate a TextField with an element using the TextField.applyTo(String/HTMLElement/Element el) method.

So I changed my HTML to have an <input>


<div id="treeRendererDiv" align="left" style="overflow:auto" >
<div >
<div id="toolBar">
<input id='searchInput' type='text'></input>
</div>
<div id="treeContainer"></div>
</div>
</div>
But this still doesn't work


...
var tbar = new Ext.Toolbar('toolBar');
...

var searchInputEl = Ext.get('searchInput');
if(searchInputEl){
searchField.applyTo(searchInputEl);
new Ext.KeyMap('searchInput',{
key:"abcdefg0123456789",
fn:function(){
alert("in keymap");
//treeManager.onSearchChange();
}
});
}In this block, searchInputEl is null and so the block is skipped. Deeper debugging shows that everything the 'toolBar' div gets removed from the DOM when the Ext.ToolBar constructs. So then I moved my 'searchInput' tag to the bottom of the doc in a hidden div. When I do this the searchField.applyTo(searchInputEl) call fails complaining of an invalid pointer.

Any ideas on this?