PDA

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



emils
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?
Thanks!

carl23934
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:



<html>
<body>
<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">

Ext.onReady(function(){

var tree = new Ext.form.FormPanel({
renderTo: document.body,
width:400,
height:700,
frame:true,
items:[{
xtype: 'textfield',
fieldLabel: 'First Name'
},{
xtype: 'textfield',
fieldLabel: 'Last Name'
}],
listeners:{
render:function(panel){
panel.el.on('keypress',panel.myPanelKeyHandler);
}
},
myPanelKeyHandler:function(e){
var key = e.getKey();
if( key === e.ENTER ){
Ext.Msg.alert('ENTER Key Pressed!', 'omg!' );
}else{
Ext.Msg.alert('Other Key Pressed!', key );
}
}
});

});
</script>
</body>
</html>

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

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

emils
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() {
/*code*/
this.el.on('keypress', this.onKeyPress, this);
/*code*/
},
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?
thanks!

Condor
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.

emils
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')) {
this.GetField('First_edit_field_id').focus();
} else {
// must be wery careful with labels !!!!!
while (Next.isXType('label')) { Next = Next.nextSibling(); };
Next.focus();
}
}
},

Condor
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.).

emils
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:)