PDA

View Full Version : How to put keybord event to formPanel?



jimmy06200
28 Aug 2009, 8:07 AM
Hi,

I want to know how it's possible to submit a form with the key "enter".

I use a formPanel, I have test:

myformPanel.on("keypress",function(e){
alert("event"+e.getKey());
});

and

myformPanel.addListener("onkeypress",function(e){
alert("event"+e.getKey());
});
but it's don't work, I don't have an alert.

Thanks

Jim

Condor
29 Aug 2009, 3:58 AM
The first one (without the 'on') is correct.

But it doesn't work, because the element inside the form 'steal' the enter key.

Fortunately there is a better solution (http://www.extjs.com/forum/showthread.php?t=75999).

jimmy06200
30 Aug 2009, 11:32 AM
Thanks it's just what I want but I don't know how to implement this because I use panelForm and not BasicForm.
Do you have an example who implement this please.

Thanks

Jim

Condor
30 Aug 2009, 10:07 PM
If you don't have a <form> tag you're stuck with adding a keydown handler to every field on the panel.

jimmy06200
30 Aug 2009, 11:44 PM
If I understand I have to change my formPanel to a basicForm?

If I don't have another choice ^^ . Do you have an example with basicForm with submit on enter?

Thanks

Jim

Condor
30 Aug 2009, 11:48 PM
A FormPanel contains a BasicForm (see the API docs for FormPanel.getForm) and it is created with the same config options (except listeners).

So Animals override (http://www.extjs.com/forum/showthread.php?t=75999) also adds for a submitOnEnter config option in FormPanel.

jimmy06200
31 Aug 2009, 1:18 AM
I have try to put "submitOnEnter:true," in parameter of my formPanel and firebug give me

Ext.isObject is not a function
chrome://firebug/content/blank.gif this.submit(Ext.isOb...er) ? this.submitOnEnter : undefined);\r\n

I use ExtJS on mapfish not ExtJS 3.0, it's a problem?

Thanks for help

Jim

Condor
31 Aug 2009, 2:31 AM
It's an Ext 3.0 override. You would need to modify it for Ext 2.x.

jimmy06200
31 Aug 2009, 8:23 AM
I try to adapt the overide of animal but I don't understand this line:

this.submit(Ext.isObject(this.submitOnEnter) ? this.submitOnEnter : undefined);

Where I can find the ExtJS 2.x API documentation? Because Ext.isObject doesn't exist.

I have test this:

this.submit(true ? this.submitOnEnter : undefined);

but it's don't work :(

Thanks for help

Jim

Condor
31 Aug 2009, 10:03 AM
Change:
Ext.isObject(this.submitOnEnter)
to
typeof this.submitOnEnter == 'object'

jimmy06200
31 Aug 2009, 10:15 AM
Thanks I have test:

this.submit(typeof this.submitOnEnter == 'object' ? this.submitOnEnter : undefined);

This is my formPanel:


var login = new Ext.FormPanel({
id: 'id', //id de la fenÍtre
frame: true, //pour que tous les items soient dans la mÍme frame
autoWidth: true, //largeur de la fenÍtre
autoHeight: true,
submitOnEnter:true,
//standardSubmit:true,
labelWidth: 50, //largeur des labels des champs
defaults: {width: 230}, //largeur des champs
labelAlign: 'left',
buttonAlign:'center', //les labels s'aligneront a droite
bodyCfg: {tag:'center', cls:'x-panel-body'}, //on aligne tous les champs au milieu de la fenÍtre
bodyStyle: 'padding:5p;margin:0px; ',
items: [{
xtype: 'textfield',
fieldLabel: 'Login',
id: 'login',
name: 'login',
allowBlank: false,
blankText:"Veuillez saisir votre pseudo."
} ,{
xtype: 'textfield',
fieldLabel: 'Password',
id: 'pass',
name: 'pass',
allowBlank: false,
inputType: 'password',
blankText:"Veuillez saisir votre mot de passe."
}],buttons:[{
xtype: 'button',
arrowAlign:'center',
text: 'Se connecter',
handler: fct_submit //fonction ŗ appeler lorsque líon clique sur le bouton

} ]
});And I have this:

uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: http://localhost/workspace/MapFish/client/mfbase/ext/adapter/ext/ext-base.js :: anonymous :: line 10" data: no]
http://maps.gstatic.com/intl/fr_ALL/mapfiles/164e/maps2.api/main.js/eval/Hvc6YA0LZtVeY3S%2BxFVh5A%3D%3D

Thanks for help

Jim

jimmy06200
31 Aug 2009, 11:15 AM
Ok it's works if I put parameter "url:'save-form.php'," to formPanel

but if I put "url: my_function," I have an exception:

uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: http://localhost/workspace/MapFish/client/mfbase/ext/adapter/ext/ext-base.js :: anonymous :: line 10" data: no]

Do you know how it's possible to call a function and not an url to submit form.


This is the override for ExtJS 2.x:


Ext.override(Ext.form.BasicForm, {
/**
* @cfg {Object/Boolean} submitOnEnter
* If set, this causes the form to be submitted when the Enter key is pressed when an item
* of this form is focused. If the value of the <code>submitOnEnter</code> config is an object,
* it is passed as the options parameter to the {@link #submit} method.
*/

initEl : function(el){
this.el = Ext.get(el);
this.id = this.el.id || Ext.id();

// If submitOnEnter wanted, add a non-focussable <input type="submit">
if (this.submitOnEnter) {
this.submitInput = this.el.createChild({
tag: 'input',
type: 'submit',
cls: 'x-hide-offsets',
tabIndex: -1
});
}


if(!this.standardSubmit){
// Trap the submit input and invoke the submit method
if (this.submitInput) {
this.submitInput.on("click", function() {
// alert('event');
this.submit(typeof this.submitOnEnter == 'object' ? this.submitOnEnter : undefined);
}, this);
}
this.el.on('submit', this.onSubmit, this);
}
this.el.addClass('x-form');
}
});

Jim

Condor
31 Aug 2009, 11:16 AM
There is something wrong with the XHR that is being done.

Can you post the code of fct_submit?

jimmy06200
31 Aug 2009, 11:18 AM
This is my function:


function fct_submit(btn){

if(login.getForm().isValid()){
login.getForm().submit({
url: urlPHP+'connect.php',
method: 'POST',

success: function(result, request){
start();
winLogin.destroy();


},
failure: function(result, request){
var reson=request.result.result;
//alert(reson);
ShowMess(reson, 'Erreur');
}
});
}

}
}

Simple submit I think

Thanks Jim

jimmy06200
31 Aug 2009, 11:28 AM
Ok it's works if I put parameter "url:'save-form.php'," to formPanel but I'm obliged to put listeners to have results



myForm.on("actioncomplete",function(form){
start();
winLogin.destroy();
},this);

myForm.on("actionfailed",function(form,action){
var reson=action.result.result;

ShowMess(reson, 'Erreur');

},this);

If I put "url: my_function," I have an exception:

uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: http://localhost/workspace/MapFish/client/mfbase/ext/adapter/ext/ext-base.js :: anonymous :: line 10" data: no]


function my_function(btn){

if(login.getForm().isValid()){
login.getForm().submit({
url: urlPHP+'connect.php',
method: 'POST',
reset: false,
success: function(result, request){
start();
winLogin.destroy();


},
failure: function(result, request){
var reson=request.result.result;
//alert(reson);
ShowMess(reson, 'Erreur');
}
});
}

}
}

Do you know how it's possible to call a function and not an url to submit form.


This is the override for ExtJS 2.x:


Ext.override(Ext.form.BasicForm, {
/**
* @cfg {Object/Boolean} submitOnEnter
* If set, this causes the form to be submitted when the Enter key is pressed when an item
* of this form is focused. If the value of the <code>submitOnEnter</code> config is an object,
* it is passed as the options parameter to the {@link #submit} method.
*/

initEl : function(el){
this.el = Ext.get(el);
this.id = this.el.id || Ext.id();

// If submitOnEnter wanted, add a non-focussable <input type="submit">
if (this.submitOnEnter) {
this.submitInput = this.el.createChild({
tag: 'input',
type: 'submit',
cls: 'x-hide-offsets',
tabIndex: -1
});
}


if(!this.standardSubmit){
// Trap the submit input and invoke the submit method
if (this.submitInput) {
this.submitInput.on("click", function() {
// alert('event');
this.submit(typeof this.submitOnEnter == 'object' ? this.submitOnEnter : undefined);
}, this);
}
this.el.on('submit', this.onSubmit, this);
}
this.el.addClass('x-form');
}
});

Jim

Condor
31 Aug 2009, 10:44 PM
The override uses the submitOnEnter as the config object for the submit, e.g.

submitOnEnter: {
url: urlPHP+'connect.php',
method: 'POST',
reset: false, // <- ???
success: function(result, request){
start();
winLogin.destroy();
},
failure: function(result, request){
var reson=request.result.result;
//alert(reson);
ShowMess(reson, 'Erreur');
}
}

or you rewrite the plugin to use:

this.submitInput.on("click", function() {
if(typeof this.submitOnEnter == 'function'){
this.submitOnEnter();
}else{
this.submit(typeof this.submitOnEnter == 'object' ? this.submitOnEnter : undefined);
}
}, this);

jimmy06200
3 Sep 2009, 11:17 AM
Thanks!!

It's work perfectly!

Cheers

Jim