View Full Version : I need a "specialkey" or "keydown" event, but on a FormPanel

18 Feb 2011, 6:01 AM
The case is as follows:

When the user presses "Enter" on a Field, I want to focus the next field on the FormPanel. I know how to do it with the events of the field class, in fact just so I did it. But is it possible to add an event listener in a form panel with key code?

The question is NOT how to add event listener, but how to provide key code(s) with that listener.

Now i am reading documentation for EventManager...

Any ideas about that?

18 Feb 2011, 6:39 AM
You need to attach an event listener to the panel element. The keypress events are not listed in the events fired by the formpanel / panel component, so you need to attach it to the element.

I think there is a plugin out there that simplifies adding DOM listeners to Ext components.

So something like this:

<link rel="stylesheet" type="text/css" href="/inc/js/ext-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="/inc/js/ext-3.2.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="/inc/js/ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript">


var tree = new Ext.form.FormPanel({
renderTo: document.body,
xtype: 'textfield',
fieldLabel: 'First Name'
xtype: 'textfield',
fieldLabel: 'Last Name'
var key = e.getKey();
if( key === e.ENTER ){
Ext.Msg.alert('ENTER Key Pressed!', 'omg!' );
Ext.Msg.alert('Other Key Pressed!', key );


18 Feb 2011, 7:01 AM
thanks! i will test it

18 Feb 2011, 7:54 AM
Also have a look at the 'keys' config option.

22 Feb 2011, 1:49 AM
Well... the problem still exists :(
I will describe it again:
I have a form with some fields. When the user hits enter, I want to focus the next field of the form.
I did the following:

var MyForm = Ext.extend(Ext.form.FormPanel, {
initComponent:function() {
Ext.apply(this, {
/*some config options*/
defaults: {
/*some config options*/
enableKeyEvents: true,

/*some config options*/

onRender:function() {
this.el.on('keypress', this.onKeyPress, this);
onKeyPress:function(f,e) {
var key = e.getKey();
if( key == e.ENTER ){
/* Code to select next field on the form*/

I tried all three events - keydown, keypress and spatialkey. code works well but not as expected.
The events keydown, keypress and spatialkey described by two parameters: (Ext.form.TextField this, Ext.EventObject e)

BUT in this case onKeyPress function is called with only a single parameter - event object. I did not find a function of the form that give me back the current focused field... So I can not focus the next field, because I have no idea which is curennt selected at the moment :(( :)

any ideas?

22 Feb 2011, 11:35 PM
You can use e.getTarget() to get the event target. Then you can check if this event target is within the itemCt of one of the fields.

23 Feb 2011, 5:38 AM
Thank a lot!!! I got it!

onKeyPress:function(e) {
var key = e.getKey();
if( key == e.ENTER ){
var Current = Ext.getCmp(e.getTarget().id);
var Next = Current.nextSibling();
if (Current === this.GetField('Last_edit_field_id')) {
} else {
// must be wery careful with labels !!!!!
while (Next.isXType('label')) { Next = Next.nextSibling(); };

23 Feb 2011, 5:44 AM
You have to check that 'Current' is defined as a Field (it some cases it can be something else, e.g. HtmlEditor font selection, DateField today button etc.).

23 Feb 2011, 5:54 AM
you're right, of course it is necessary:)
generally more I use this library, so more I like it:)