in the tutorial previus, we have explained about how to make simple extjs form. And in this section, we will learn about how to storing data to databse from  extjs form using php. Extjs form that we will use is the Extjs form in the previous tutorial.

1. Create Database

CREATE TABLE IF NOT EXISTS `simpleform` (
`id` int(11) NOT NULL auto_increment,
`name` varchar(50) NOT NULL,
`address` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
PRIMARY KEY  (`id`)
) ENGINE=MyISAM

2. Create “koneksi.php”

$nameserver = "localhost";
$username = "root";
$password = "";
$dbname = "defafe";
mysql_connect($nameserver,$username,$password);
mysql_select_db($dbname);
?>

3. Create “simple.php”

include "koneksi.php";
$query = "INSERT INTO simpleform (`id`,`name` ,`address` ,`email`) VALUES (NULL,'".$_POST["name"]."', '".$_POST["address"]."', '".$_POST["email"]."')";
$result = mysql_query($query);
if($result)
{
echo '{"success":"true"}';
}
else
{
echo '{"success":"false"}';
}
?>

4. Create Simpleform.js

Ext.onReady(function(){
Ext.QuickTips.init();
function resetForm() //function to reset form
{
nameField.setValue('');
addressField.setValue('');
emailField.setValue('');
}
//field in database
var idField = new Ext.form.Hidden({ // form hidden
name:'id',
fieldLabel: 'Id'
});
var nameField = new Ext.form.TextField({
name:'name',//name of filed on databasee
fieldLabel: 'Nama',
maxLength: 20,
allowBlank: false,
anchor : '95%'
});

var addressField = new Ext.form.TextField({
name:'address',
fieldLabel: 'Address',
maxLength: 20,
allowBlank: false,
anchor : '95%'
});

var emailField = new Ext.form.TextField({
name:'email',
fieldLabel: 'Email',
vtype:'email',//email validation
maxLength: 20,
anchor : '95%'
});

var SimpleForm = new Ext.FormPanel({
labelWidth: 90, // label settings here cascade unless overridden
url:'simple.php',
frame:true,
width:300,
autoHeight:true,
padding:200,
items: [idField,nameField,addressField,emailField],

buttons: [{
text: 'Save',
handler: function(){
if(SimpleForm.getForm().isValid())
{
SimpleForm.getForm().submit({
url:"simple.php",
waitingMsg:"loading store..",
success: function(SimpleForm,o)
{
Ext.MessageBox.alert('craeating Ok',"Storing Data success........");
resetForm();
},
failure: function(SimpleForm, o){
Ext.MessageBox.alert('Warning','failur...');
}
});
}
}
},{
text: 'Cancel',
handler: function(){
SimpleForm.getForm().reset();
}
}]
});
var createwindow = new Ext.Window({
title: 'Simple Form',
width:315,
height:180,
closable: false,
items: SimpleForm
});
createwindow.show();
});

this is the screen shot alert if we success storing data to database

Tags: Anchor, Auto Increment, Cascade, Create Database, Database Tutorial, Email, Handler Function, Init Function, Insert, Js, Languages, Localhost, Maxlength, MyISAM, MySQL, Nameserver, Null, Padding, Password, PHP, Php Form, Php Tutorial, Programming, Root Password, True Width, Url, Validation

extjs themes , extjs file upload , extjs theme , extjs upload , extjs upload file , extjs grid checkbox , extjs tutorial , extjs login , extjs login form , extjs grid paging site:defafe com , site:defafe com , site:defafe com , data base grid checkbox extjs , how to check password and confirm password in php , login window for extjs , tbar checkbox extjs , checkbox tbar grid extjs , extjs access session , find expanded rows in ext grid 

This entry was posted by faisal at on Wednesday, February 11th, 2009 at 5:41 pm and is filed under Tutorial Extjs, Tutorial HTML, Tutorial PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.