PDA

View Full Version : Submit FormPanel via Enter-Key -> fireEvent of Submit-Button



Realnub
29 Jul 2009, 2:55 AM
Hello Guys,

this is my first post here. I hope you are able to understand my english.

My Problem is, that my FormPanel is submitted twice, if i tab to the Submit-Button (yeah, the Button has the Focus) and than hitting ENTER.

My FormPanel has two Keys defined:


keys: [{
key: [Ext.EventObject.ESC], fn: function(){
Ext.ComponentMgr.get('BtnCancel').fireEvent('click');
}
},{
key: [Ext.EventObject.ENTER], fn: function(){
Ext.ComponentMgr.get('BtnSubmit').fireEvent('click');
}
}]
You can see, that by hitting ENTER at any place in the FormPanel the Click-Event of the Buttons are fired, which have the following Code:


buttons: [{
text: 'Submit',
id: 'BtnSubmit',
listeners: { click: function() {
Ext.ComponentMgr.get('fpXY').getForm().submit({
url:path+'insertXY.php',
waitMsg:'any Message ...',
success: function(form, action) {
showSuccess(action.result.msg);
Ext.ComponentMgr.get('winXY').destroy();
loadXY();
},
failure: function(form, action) {
if(action.result)
{
showError(action.result.msg);
}
}
});
}}
},{
text: 'Cancel',
id: 'BtnCancel',
listeners:{ click: function() {
Ext.ComponentMgr.get('winXY').destroy();
}}
}],
So if any Button has the Focus and you hit ENTER, the BTNSubmit fires his click Event. So I submitt twice or I Submit and Destroy the FormPanel.

Is there any way to figure out, if a button has the focus? or is my solution so far quiet wrong?

thx for your help


// I used the Search, but i found only some other Solutions. I hope i can fix my problem very easy, without doing to much new :)

Animal
29 Jul 2009, 3:24 AM
Do not use a key listener. Use HTML's native method.



Ext.override(Ext.form.BasicForm, {
initEl : function(el){
this.el = Ext.get(el);
this.id = this.el.id || Ext.id();
if(!this.standardSubmit){
this.submitInput = this.el.createChild({
tag: 'input',
type: 'submit',
cls: 'x-hide-offsets',
tabIndex: -1
});
this.submitInput.on("click", function() {
this.submit();
}, this);
this.el.on('submit', this.onSubmit, this);
}
this.el.addClass('x-form');
}
});


The extra, red code adds a submit input which reacts to enter, and submits the form.

Animal
29 Jul 2009, 3:31 AM
Feature Request added for a submitOnEnter config for FormPanel/BasicForm

http://extjs.com/forum/showthread.php?p=365560

Realnub
29 Jul 2009, 6:45 AM
thanks to your fast response, but i`m not able to understand your posts

why not use keyvlisteners?

Animal
29 Jul 2009, 7:41 AM
It's just a natural part of HTML <form> processing when an <input type="submit"> is present, so why not use it instead of listening for every keystroke and testing every one?

Realnub
30 Jul 2009, 2:24 AM
listening to every keystroke takes performance, ok so far ein understand.

but your code .. i cant get them working. u want to use the functionality of a html submit, when it is disabled?

Animal
30 Jul 2009, 4:12 AM
It's not disabled. It's hidden. It fires a click event when Enter is pressed, and we have a listener on that which calls submit. Set a breakpoint there and check it's firing.

SteelersFan
23 Sep 2009, 10:26 AM
Feature Request added for a submitOnEnter config for FormPanel/BasicForm

http://extjs.com/forum/showthread.php?p=365560


This solution worked for me, but only in FF. It did not work in IE7. Has anyone else noticed this problem and come up with a solution for IE?

Air_Mike
29 Oct 2009, 2:34 AM
Hi,

this is great override, but it doesn't work on IE.

I found out that hidden input element (type submit) was given class x-hide-offsets which has property visibility: hidden. That property (for some unknown reason) influence IE in the way that it ignores that submit element.

I gave that element different class which doesn't have that property (all other properties are there like big negative offsets) and now it work in IE.

fsa3
4 Nov 2009, 7:51 AM
Hi -

I tried getting Animal's solution working but I'm doing something wrong. I took his code and just pasted it in a global onReady function. What else must I do (either to my form or otherwise) to make this work?

My Form currently is:


var f = new Ext.FormPanel({
labelWidth: 100,
url: '/A_DoLogin.jsp',
frame: true,
defaults: {width: 150},
items: [
{xtype: 'hidden',
name: 'redir',
value: redir
},

{xtype: 'textfield',
fieldLabel: 'Email address',
name: 'email',
vtype: 'email'},

{xtype: 'textfield',
inputType: 'password',
fieldLabel: 'Password',
name: 'password',
allowBlank: false}
],
buttons: [{text: 'Login',
minWidth: 75,
type:'submit',
handler: function() {
if (f.getForm().isValid())
{
f.getForm().submit({...

Thanks.

Preston85
13 Jan 2010, 3:36 AM
Hi -

I tried getting Animal's solution working but I'm doing something wrong. I took his code and just pasted it in a global onReady function. What else must I do (either to my form or otherwise) to make this work?

My Form currently is:


var f = new Ext.FormPanel({
labelWidth: 100,
url: '/A_DoLogin.jsp',
frame: true,
defaults: {width: 150},
items: [
{xtype: 'hidden',
name: 'redir',
value: redir
},

{xtype: 'textfield',
fieldLabel: 'Email address',
name: 'email',
vtype: 'email'},

{xtype: 'textfield',
inputType: 'password',
fieldLabel: 'Password',
name: 'password',
allowBlank: false}
],
buttons: [{text: 'Login',
minWidth: 75,
type:'submit',
handler: function() {
if (f.getForm().isValid())
{
f.getForm().submit({...Thanks.

I think you are missing
submitOnEnter : true

I've got it working in mine but the response isn't working.


buttons: [{
text : 'Login',
handler : function(){
Ext.getCmp('access_form').getForm().submit({
waitMsg :'Checking login credentials - Please Wait...',
success : function(f,a){
// Display message box with users name and accesslevel, when user clicks ok call openMainSite() function.
Ext.Msg.alert('Success','Welcome: '+ a.result.returnmsg, openMainSite);
// User authenticated.<br />
// +'<br />Your accesslevel is: '+ a.result.accesslevel +'.'
},
failure: function(f,a){
// If access denied display error message passed from php file.
Ext.Msg.alert('Error','Access denied: '+a.result.returnmsg);
}
});
}
}


That is my login script which works when Submit is pushed, but when I push enter it submits correctly, and the PHP response is correct but nothing happens as though the Return Submit does not use the response code.