PDA

View Full Version : FormPanel - How to submit data?



AndreaCammarata
17 Jun 2010, 3:02 PM
Hi guys,
I already start to develope with this amazing framework building an application for my iPad, but I face a problem:
"How to submit a form wrapped inside a FormPanel?". Using ext, that was simple:



if(myForm.getForm().isValid()){
myForm.getForm().submit({
url: myUrl,
params: {
action: 'test'
},
waitMsg: msgSending,
success: function(form, action){
...
}
});
}
But how can I do the same with sencha-touch-beta-0.90?
I don't find a way to do it even reading the sencha api.
To be honest, reading the example in the package, you suggest me to use an Ajax.Request but I would like to use the built in form actions.

Please Help,
Thanks:-?

TommyMaintz
17 Jun 2010, 4:57 PM
Hey Andrea,

We will provide more examples and tutorials on this topic. The best way to currently achieve this right now is to call getValues() on the FormPanel or to listen for the 'submit' event on formpanel (which gets passed the formpanel and all the values), then put the values inside a new record. Add the record to a store and call sync() on the store to automatically sync to your server (or localstorage if you set up a localstorageproxy).



// create a new record from the given values
var record = Ext.ModelMgr.create(form.getValues(), 'Action');

//insert the new record into the store, and sync it with local storage
store.add(record);
store.sync();

Please check the API docs for the Data package and FormPanel for more information.

sjonnet19
18 Jun 2010, 4:36 AM
Tommy,

Is this the new preferred method? I like it is I am working with a data store but that is not always the case. Does this mean the in ExtJS 4 and or Sencha Touch we will no longer be able to set the url, succes and failure functions and call form.submit? I am not looking for exact data to model to form storage on the client... This is a mobile application and should only show a summary of the data...

Can you provide me any insight in how I should prepare to do this?


Hey Andrea,

We will provide more examples and tutorials on this topic. The best way to currently achieve this right now is to call getValues() on the FormPanel or to listen for the 'submit' event on formpanel (which gets passed the formpanel and all the values), then put the values inside a new record. Add the record to a store and call sync() on the store to automatically sync to your server (or localstorage if you set up a localstorageproxy).



// create a new record from the given values
var record = Ext.ModelMgr.create(form.getValues(), 'Action');

//insert the new record into the store, and sync it with local storage
store.add(record);
store.sync();

Please check the API docs for the Data package and FormPanel for more information.

AndreaCammarata
18 Jun 2010, 6:37 AM
Hi Tommy, thanks for your reply.
To be honest i dont't really like the solution to add a record to a store and sync with the server to be able to make a simple login. If this is the only solution, i prefer make a new Ext.Ajax.request to the server passing the form values as params.
Isn't better? Tell me your opinion.
By the way, it seems there's no Form.submit function in Sencha, any planning to implement it?It woul be really helpful.

Thanks

TommyMaintz
18 Jun 2010, 10:37 AM
We are definitely planning on adding more functionality to FormPanel and forms in general. For now you could make an Ext.Ajax.request and pass the formpanel.getValues(). There is nothing wrong with that solution.

edspencer
18 Jun 2010, 10:47 AM
Why not just:



Ext.Ajax.request({
url: 'myurl',
params: form.getValues(),
...
});

sjonnet19
18 Jun 2010, 12:44 PM
It's not but, it is weird since the form itself can handle this or at least most libraries do... action="myurl" ...


Why not just:



Ext.Ajax.request({
url: 'myurl',
params: form.getValues(),
...
});

TommyMaintz
18 Jun 2010, 3:36 PM
Like I said in my previous post, we are planning on adding more functionality to FormPanels (including what you are asking for) in upcoming releases. For now you can do what Ed suggested. Remember this is still a beta product. ;)

AndreaCammarata
19 Jun 2010, 5:24 AM
Thank you Tommy and edspancer, i will do like you suggest. i know this is stil a beta product, but if I can say it, this is already a awesome product ;)

sjonnet19
19 Jun 2010, 5:28 PM
I wanted to thank you guys for the insight...

This library is shaping up to be pure awesomeness...

I am trying to implement what you had suggested though I keep getting an error when I try to call: this.getValues()...



TypeError: Result of expression 'this.getValues' [undefined] is not a function.



He is a code snippet:



Company.LoginPanel = function(c){
var cfg = Ext.apply({}, c, {
fullscreen: true,
items: [{
xtype: 'fieldset',
title: 'Login',
defaults: {
required: true,
labelAlign: 'left'
},
items: [{
xtype: 'textfield',
name: 'login',
label: 'Login'
}, {
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}]
}, {
xtype: 'button',
text: 'Login',
ui: 'action',
handler: this.submit
}]
});
Company.LoginPanel.superclass.constructor.call(this, cfg);
};
Ext.extend(Company.LoginPanel, Ext.form.FormPanel, {
submit: function(){
console.dir(this.getValues()); // This fails
Ext.Ajax.request({
method: 'post',
params: this.getValues(),
scope: this,
success: function(r, o){
var obj = Ext.decode(r.responseText);
console.dir(obj);
if (obj.success === 'true') {
// Do something...
}
else {
// Do something else...
}

},
url: '/login',
});
}
});
Ext.reg('loginpanel', Company.LoginPanel);


Thanks in advance for any help...


Thank you Tommy and edspancer, i will do like you suggest. i know this is stil a beta product, but if I can say it, this is already a awesome product ;)

edspencer
19 Jun 2010, 7:07 PM
@sjonnet19 sounds like you have a scope issue, try setting up your submit button like this instead:



...
{
xtype: 'button',
text: 'Login',
ui: 'action',
handler: this.submit,
scope: this
}
...

headkit
18 Apr 2011, 5:16 AM
unfort. this doesn't work.
is there a solution anywhere out there...?
:s

c2c-shiner
18 Apr 2011, 11:22 AM
{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'spacer'
},{
text: 'Join',
handler: function (){
var values = this.form.getValues();
Ext.Ajax.request({
url: 'NewUser.php',
method: 'post',
params: values,
scope: this,
failure : function(response){
Ext.Msg.alert('Login Error', 'Try Again', Ext.emptyFn);
},
success: function(response, opts) {
Ext.Msg.confirm("Joining was a success", " Now log in with your username and password", Ext.emptyFn);
}
});
}
},{
text: 'Reset',
scope: this,
handler: function (){
demos.Join.reset();
}
}]
}

then your php page should look like this.


<?php
$con = mysql_connect("serverAddress","root","password");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("stat_app", $con);

$sql="INSERT INTO addeditplayer (firstName, lastName, number, position, bats, throws)
VALUES
('$_POST[firstName]','$_POST[lastName]','$_POST[number]','$_POST[position]','$_POST[bats]','$_POST[throws]')";

if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}
echo "1 player added";

mysql_close($con)
?>

vebjorn
27 Feb 2012, 1:46 PM
I am trying to create a TabBar Application.
I really don't understand how to submit my data, when there is no name... I have seen examples saying myForm.submit, but that requires ofcourse a name: "myForm".
I have tried to use this, but even then it cannot find the name. Now I tried "handler: this.submit", but the form does not get submitted.

Can anyone point out some hints to me?

Regards, Vebjorn


Here is the code:



// VIEWPORT.JS
ToolbarDemo.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen:true,
tabBar:{
dock:"bottom",
layout:{
pack:"center"
}
},
defaults:{
styleHtmlContent:true
},
items:[
{xtype: 'aboutcard', id:'home'},
{xtype: 'logincard'},
{xtype: 'registercard'},
{xtype: 'referencescard'},
{xtype: 'sharecard'}
]
});










//LOGIN_CARD.JS
ToolbarDemo.views.Loginform = Ext.extend(Ext.Panel, {



title:"Login",
iconCls: "home",
url: "../php/check_login.php",
items: [{
xtype: 'fieldset',
title: 'Login',
instructions: 'Enter your username (e-mail address) and password',
defaults: {
labelWidth: '40%'
},
items: [{
xtype: 'textfield',
name: 'user',
label: 'Username',
placeHolder: 'me@example.com',
required: true,
useClearIcon: true
},
{
xtype: 'textfield',
name: 'password',
label: 'Password',
inputType: 'password',
required: true,
useClearIcon: true
},
{
xtype: 'button',
name: 'submit_login',
ui: 'action',
text: 'Logg inn',
handler: this.submit,
scope:this
}
]
}]
});


Ext.reg('logincard', ToolbarDemo.views.Loginform);



@sjonnet19 sounds like you have a scope issue, try setting up your submit button like this instead:



...
{
xtype: 'button',
text: 'Login',
ui: 'action',
handler: this.submit,
scope: this
}
...

chapkin
3 Mar 2012, 3:28 AM
I wonder, was the submit form issue fixed in the current sencha touch 1.x?

In the "Forms" examples submit does not work (makes an empty query) because it is configured as "standardSubmit: false" and most probably this is the reason.

I do not think it is good when out of the box examples do not work as they should, because it is misleading.

so - what is the actual up-to-date "normal" way to submit form data with sencha 1.x ?

thanks in advance for help