PDA

View Full Version : Handling ENTER key event



ShatyUT
5 Aug 2010, 9:01 AM
I am trying to add the ability to hit enter on a search form for a component built with Ext Designer and am having some trouble. I am using the "keys" config option to handle the event and that works...I am trying to call a method defined on my component to handle that event but I'm getting something wrong with the scope I think.

Here's how I'm defining the keys option. I get to the point where the handler is called after the enter key is hit but the next line where I am actually trying to call the function to do the work, it is not defined.



ADSearchWindow = Ext.extend(ADSearchWindowUi, {
singleUser: false,
initComponent: function() {
ADSearchWindow.superclass.initComponent.call(this);
},
onSearchClick: function() {
// do search here
},
keys: [
{
stopEvent: true,
scope: this,
key: [
Ext.EventObject.ENTER
],
handler: function() {
Ext.Msg.alert('Click','Enter clicked!');
this.onSearchClick();
}
}
]
});

darthwes
5 Aug 2010, 4:31 PM
ADSearchWindow = Ext.extend(ADSearchWindowUi, {
singleUser: false,
initComponent: function() {
Ext.apply(this, {
keys: [
{
stopEvent: true,
scope: this,
key: [
Ext.EventObject.ENTER
],
handler: function() {
Ext.Msg.alert('Click','Enter clicked!');
this.onSearchClick();
}
}
]
});
ADSearchWindow.superclass.initComponent.call(this);
},
onSearchClick: function() {
// do search here
}
});


Code = response, every time...Hope that helps, not sure what the Designer is doing but your "this" gets globally abated the way you have it defined, use the "this" at runtime.

darthwes
5 Aug 2010, 4:43 PM
Also, I don't see your object hierarchy but somehow you're adding a key mapping to a form field? As a 3.2.1 developer I'm unaware of the existance of a keys config on form field. The form panel (which I think is what we're talking about) will catch Enter anytime the panel is focused (generally when a user clicks somewhere within it's area). In my mind, I would think about catching it for the specific form item, but maybe this is the grey area of me not knowing Ext Developer...

As a side note, since I'm being moderated, you guys could throw me a license for being such a cool guy...Just a thought.

Hope that helped.

(the moderated post has a solution/workaround for you...) <<--

ShatyUT
5 Aug 2010, 5:16 PM
I should note, I am running Ext. 3.1.1. Also, I'm not setting "keys" on a field...it's being set on a custom component, built with Ext Designer, that is extending the Window object. I did remove some of the code to avoid clutter such as the Search button event being configured to call the same onSearchClick function.

The "Enter" key event is definitely happening as expected. The issue is that I can't figure out how to call the method that I want to. I want clicking the search button and hitting enter to have the same result.

Condor
6 Aug 2010, 12:00 AM
What kind of component is ADSearchWindowUi? If it is an Ext.form.Field then you should be using:

listeners: {
specialkey: function(fld, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
fld.onSearchClick();
}
}
}

ps. If you want to catch an enter press anywhere in a form then I suggest using Animal's submitOnEnter patch.

ShatyUT
6 Aug 2010, 6:16 AM
ADSearchWindowUI extends the Window component...not a form field. I'll check out Animal's submitOnEnter patch but I still wonder whether I'll have the same scoping issue. As I said, I'm seeing the enter getting hit and can catch that it's happening as I want, I just can't call the correct method to execute the functionality that I want.

Condor
6 Aug 2010, 6:28 AM
As darthwes already said, if you use 'this' in the configuration it won't refer to the object instance, but to what 'this' was at the time of definition (which is probably 'window').

Have you tried the code he suggests (moving the keys definition to initComponent)?

ShatyUT
6 Aug 2010, 6:58 AM
Wow, somehow I completely missed the first post from darthwes...I only saw the second one. That looks very promising and is not something I have tried yet.

Thanks darthwes for the post!!!!

ShatyUT
10 Aug 2010, 3:17 PM
I kinda forgot about this one but finally made the change that darthwes suggested and it worked! Thanks again darthwes!!