PDA

View Full Version : ExtJS with PHP and MySQL



churcho
5 Aug 2009, 7:27 AM
Hi folks,
I am pretty sure an example exists within the forum. Could someone please help direct me or show me sample code to connect an extjs form to a dbase using php? Maybe one using the dynamic.html example in the code examples.

Thanks in advance.

5 Aug 2009, 7:47 AM
uh, all you really need to know is how to accept post/get parameters and save them via a SQL call.

mitchellsimoens
5 Aug 2009, 8:27 AM
just to give you a kick start

JS CODE

Ext.onReady(function(){
var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:"save-form.php",
frame:true,
title: "Simple Form",
id: "simpleForm",
bodyStyle:"padding:5px 5px 0",
width: 350,
defaults: {width: 230},
defaultType: "textfield",
items: [{
fieldLabel: "First Name",
name: "first",
allowBlank:false
},{
fieldLabel: "Last Name",
name: "last"
},{
fieldLabel: "Company",
name: "company"
}, {
fieldLabel: "Email",
name: "email",
vtype:"email"
}, new Ext.form.TimeField({
fieldLabel: "Time",
name: "time",
minValue: "8:00am",
maxValue: "6:00pm"
})
],
buttons: [{
text: "Save",
handler: function() {
if (Ext.getCmp("simpleForm").getForm().isValid()) {
submitForm();
}
}
},{
text: "Cancel"
}]
});
simple.render(document.body);

var formOnSuccessorFail = function(form, action) {
var result = action.result;
if (result.success) {
Ext.getCmp("simpleForm").el.unmask();
Ext.MessageBox.alert("Success!", "Form submitted");
} else {
Ext.getCmp("simpleForm").el.unmask();
Ext.MessageBox.alert("Error", "Form not submitted");
}
}

var submitForm = function() {
var form = Ext.getCmp("simpleForm");
form.el.mask("Subbmitting Form...", "x-mask-loading");
form.getForm().submit({
url: "save-form.php",
success: formOnSuccessorFail,
failure: formOnSuccessorFail
});
}

});

PHP CODE (save-form.php)

<?php

$connection = mysql_connect($db_host, $db_user, $db_pass);
$db = mysql_select_db($db_name, $connection);

$query = "INSERT INTO table_name
(`fname`, `lname`, `company`, `email`, `time`)
VALUES
('".$_POST["first"]."', '".$_POST["last"]."', '".$_POST["company"]."', '".$_POST["email"]."', '".$_POST["time"]."')";
$result = mysql_query($query);
if ($result) {
$result_arr = array("success" => true, "msg" => "form submitted");
} else {
$result_arr = array("success" => false, "msg" => "form not submitted");
}

mysql_close($connection);

return json_encode($result_arr);

?>

churcho
5 Aug 2009, 11:47 PM
The form just displays a the message without saving anything to the db. I have changed the connection string and everything else.

I would also like to show a message when there is no connection to the database and such like. Any idea on how to implement that? :(

churcho
6 Aug 2009, 1:30 AM
Ext.onReady(function(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();

/*
* ================ Form 5 =======================
*/
bd.createChild({tag: 'h2', html: 'Add Projects'});

var projectForm = new Ext.FormPanel({
url:"save-form.php",
id: "projectForm",
labelAlign: 'top',
title: 'Add Project Details',
bodyStyle:'padding:5px',
width: 600,


items: [{
layout:'column',
border:false,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Project Title:',
name: 'ptitle',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Priority Area:',
name: 'priorityarea',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Division Unit:',
name: 'unit',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Time Frame/Date:',
name: 'email',
vtype:'email',
anchor:'95%'
}] },{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Contact Name:',
name: 'cname',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Contact Email:',
name: 'email',
vtype:'email',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Contact Extention:',
name: 'telext',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Contact Mobile:',
name: 'telmobile',
anchor:'95%'
}]
//end of section
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:335,
defaults:{bodyStyle:'padding:10px'},
items:[{


title:'Project Objectives',
layout:'fit',

items: {
xtype:'htmleditor',
id:'bio2',
fieldLabel:'Biography'
}
},
//end of first tab
{
title:'More Details',
layout:'form',
defaults: {width: 530},
defaultType: 'textarea',

items: [{
fieldLabel: 'Potential Synergies/ Partnerships:',
name: 'partnerships',
value: ''
},{
fieldLabel: 'Communication Tools Desired:',
name: 'comtools',
value: ''
},{
fieldLabel: 'Proposed Budget (For Communication Projects Only)',
name: 'comtools',
value: ''
}
]
},



]
}],

buttons: [{
text: "Save",
handler: function() {
if (Ext.getCmp("projectForm").getForm().isValid()) {
submitForm();
}
}
},{
text: "Cancel"
}]
});
projectForm.render(document.body);

var formOnSuccessorFail = function(form, action) {
var result = action.result;
if (result.success) {
Ext.getCmp("projectForm").el.unmask();
Ext.MessageBox.alert("Success!", "Form submitted");
} else {
Ext.getCmp("projectForm").el.unmask();
Ext.MessageBox.alert("Error", "Form not submitted");
}
}

var submitForm = function() {
var form = Ext.getCmp("projectForm");
form.el.mask("Subbmitting Project Details...", "x-mask-loading");
form.getForm().submit({
url: "projAdd.php",
success: formOnSuccessorPass,
failure: formOnSuccessorFail
});
}

});

churcho
6 Aug 2009, 1:31 AM
Thats my code, anyone who can help me with save-form.php code to save to the db.
I would really appreciate it.

Thanks

churcho
6 Aug 2009, 4:54 AM
mizzory I realized that your code works. The problem is that the Subbmitting Form message box is displayed untill I refresh the page. It does not show me if the data has been saved or anything else for that matter. I would like to be able to show a message if the database connection is available, and if data is not validated.

Thanks

churcho
12 Aug 2009, 9:16 PM
Any help on this folks? I just need to get that example firing and all should be ok. I think I can work my way from that point. Just need to connect and display msgs! :)

mitchellsimoens
13 Aug 2009, 8:23 AM
If you look up at my PHP code I provided you, you see an array ("success" => true, "msg" => "form submitted") both if it worked or not.

So now we can modify the JS code for the formOnSuccessorFail() function. Here is the original again:


var formOnSuccessorFail = function(form, action) {
var result = action.result;
if (result.success) {
Ext.getCmp("simpleForm").el.unmask();
Ext.MessageBox.alert("Success!", "Form submitted");
} else {
Ext.getCmp("simpleForm").el.unmask();
Ext.MessageBox.alert("Error", "Form not submitted");
}
}

Now if you see result is the array the we json_encode() in the PHP script. 'result.success' gets the true or false from the array but we also have 'msg' that has a string assigned to it. So we can change the Ext.MessageBox.alert() to work with this. The first string in the Ext.MessageBox.alert() is the title and the second is the body. Here is a way to put 'msg' from the PHP array in the body:


var formOnSuccessorFail = function(form, action) {
var result = action.result;
if (result.success) {
Ext.getCmp("simpleForm").el.unmask();
Ext.MessageBox.alert("Success!", result.msg);
} else {
Ext.getCmp("simpleForm").el.unmask();
Ext.MessageBox.alert("Error", result.msg);
}
}

So now it will display if the form was saved or not depending on the text you have in the array form the PHP script. You can add more key/values to the array to do some more things to suit your needs.

Hope I typed this to be understandable.