PDA

View Full Version : Submitting a form using Sencha Touch



Rakesh Pai
30 Nov 2010, 3:32 AM
I want to build a simple form with Sencha Touch, and attach a submit handler to it. Either I'm a n00b, or this is surprisingly hard to do. Here's what I want:


Attach an onSubmit handler to the form, not a onClick handler to the submit button
Cancel form submission when the form is submitted.


The problem is that regular Sencha Touch buttons are not buttons at all - they are just a bunch of divs and spans. Hence, tapping on the submit button doesn't fire the native form submit. As a result, a handler will need to be attached to the "button" to fire a submit on the form, and then capture the submit of the form to do what I want. This is do-able, but doesn't sound elegant. Is there a better way of doing this?

The second problem is that of event canceling. How do I get a handle of the submit event object so that I can call preventDefault on it? Is there any other way to do this in the Sencha Touch world?

evant
30 Nov 2010, 3:36 AM
1) Use the handler config on the button.
2) The form fires a beforesubmit event, which allows you to cancel.

joshuab86
1 Dec 2010, 9:10 PM
Hi, I'm having a related problem. I've got my form submit working... but I can't seem to make the values POST to the database. All I really need to do is create a table with 3 columns, submit 3 values to it, then see them later on another page/tab. I obviously don't know enough about this, but I feel like I have this right:

index.js exerpt


var form;

Ext.regModel('User', {
fields: [
{name: 'beerName', type: 'string'},
{name: 'beerRate', type: 'string'},
{name: 'beerType', type: 'string'}
]
});

Ext.regModel('Rate', {
fields: [
{name: 'beerRate', type: 'string'},
{name: 'title', type: 'string'}
]
});

var rateStore = new Ext.data.JsonStore({
data : [
{ rate : '*', title : '*'},
{ rate : '**', title : '**'},
{ rate : '***', title : '***'},
{ rate : '****', title : '****'},
{ rate : '*****', title : '*****'}
],
model : 'Rate',
autoLoad : true,
autoDestroy : true
});

Ext.regModel('Type', {
fields: [
{name: 'beerType', type: 'string'},
{name: 'title', type: 'string'}
]
});

var typeStore = new Ext.data.JsonStore({
data : [
{ type : 'hef', title : 'Hefeweizen'},
{ type : 'port', title : 'Porter'},
{ type : 'pil', title : 'Pilzner'},
{ type : 'ipa', title : 'IPA'},
{ type : 'pa', title : 'Pale Ale'}
],
model : 'Type',
autoLoad : true,
autoDestroy : true
});

var formBase = {
scroll: 'vertical',
url : 'postBeer.php',
standardSubmit : false,
items: [
{
xtype: 'fieldset',
title: 'Add A Beer',
instructions: 'Please enter the information above.',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'textfield',
name : 'beerName',
label: 'Beer Name',
useClearIcon: true,
autoCapitalize : false
}, {
xtype: 'selectfield',
name : 'beerRate',
label: 'Beer Rating',
valueField : 'rate',
displayField : 'title',
store : rateStore
}, {
xtype: 'selectfield',
name : 'beerType',
label: 'Beer Type',
valueField : 'type',
displayField : 'title',
store : typeStore
}]
}
],
listeners : {
submit : function(form, result){
console.log('success', Ext.toArray(arguments));
},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
}
},


it's supposed to post it to my
postBeer.php page

<?php
$beerName = $_POST["beerName"];
$beerType = $_POST["beerType"];
$beerRate = $_POST["beerRate"];
$report = "Error Adding Beer";

if($db = sqlite_open('beerSnob.db', 0666, $sqLiteError))
{
sqlite_query($db, "INSERT INTO beers VALUES('$beerName','$beerType','$beerRate')");
$report = "Sucessfully Added Beer";
}
else
{
die($sqlLiteError);
}
?>

But nothing seems to happen.

I'm hoping someone can find a simple explanation of how to submit values to a sqLite DB from a form in SenchaTouch then view them later.

evant
1 Dec 2010, 9:13 PM
You never actually submit the form, you need to call the form submit method at some point.

joshuab86
1 Dec 2010, 10:08 PM
Thanks for the quick reply evant. I guess thats part of what my problem is, I'm not sure how to do that.
My submit button looks like this:
index.js exerpt

dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{xtype: 'spacer'},
{
text: 'Reset',
handler: function() {
form.reset();
}
},
{
text: 'Save',
ui: 'confirm',
handler: function() {
if(formBase.user){
form.updateRecord(formBase.user, true);
}
form.submit({
waitMsg : {message:'Submitting', cls : 'demos-loading'}
});
}
}
]
}
]

How does that need to change to actually submit it? When I press it I see a about 3 objects that log as a 'failure' in the debug console, but it's all indiscernible to me.

evant
1 Dec 2010, 10:53 PM
In fact there's an example of exactly that: http://dev.sencha.com/deploy/touch/examples/forms/

It shows how to submit to the server and return a response.

joshuab86
1 Dec 2010, 10:59 PM
That is, in fact, the very example I have based my model off of entirely. :)
The only thing pertaining to form submission that I have changed is the url to which I submit the form. So maybe I've mussed that up somehow. I'd really like it to go into a sqlite DB, does anyone know of any examples on how to post to a sqlite db?
By the way, thanks so much for all your help. I'm just trying to figure this all out. I've got programming theory, but I'm super rusty on languages.

evant
1 Dec 2010, 10:59 PM
It's really out of scope for this forum, perhaps look up some PHP tutorials.

Really quick Google: http://www.shokhirev.com/nikolai/abc/IT/php_db/php_db.php

joshuab86
2 Dec 2010, 12:34 AM
It's really out of scope for this forum, perhaps look up some PHP tutorials.

Really quick Google: http://www.shokhirev.com/nikolai/abc/IT/php_db/php_db.php

Wow evant, thanks so much for doing that. I've been seeing other examples that really confused me, but I think this one will give me a much better idea. Now all I have to do is figure out if/how that data is being POSTed from Sencha.

joshuab86
2 Dec 2010, 12:42 AM
Would it be safe to say that if the submit button is working the way it's designed to in Sencha Touch, then the values would be posted just the same as they would in a standard HTML post fashion? There isn't any extra trickery I need to do on the receiving end to get at the info right?

evant
2 Dec 2010, 12:56 AM
Just a standard post, nothing out of the ordinary.