View Full Version : Extjs 4 and PHP

11 Mar 2012, 10:10 PM
I have just started learning Extjs 4 and I wanted to make an application using Extjs 4 and PHP, where I have a form with few text fields and submit button, where I can input values and after submit, I want to go to a PHP file where I can connect to mysql database and save the data in database.
Similarly I want to retrieve data from same table and display in browser using a grid.

As of now, I made the form with submit, but I'm not able to understand how to connection to PHP file. It seems that url config value will help and I tried using that, But I'm not getting the right result.

I tried to search if there is any related post on web. I found following:

But it's not really helping much. It seems there old extjs has been used.

If someone could explain me with an example, that will be really helpful.
OR If you can provide some link where it has been already explained.

Thanks in advance,
Anurag Singh

12 Mar 2012, 6:15 AM
What do you mean you aren't getting the right result?

12 Mar 2012, 8:23 AM
mitchellsimoens~, Thank you very much for such a quick response.

"I'm not getting the right result" means that I gave one php file in URL, In PHP file, I just have one line to echo a JSON format message. When I click submit, I don't get any response. Request is not reaching to PHP file probably.

Let me explain a bit more if that helps:

I created a "Form" having few textfields and a "submit" button. I used MVC Architecture. My view file is <app_name>/app/view/Simpleform.js where I have set URL as:
url: 'save-form.php'

Then I created save-form.php file where I have just one line as below:
echo '({ "success": true, "msg": "User added successfully" })';

I have handler function for "submit" button the way you have provided in your guide in "Submitting a Form" section in http://docs.sencha.com/ext-js/4-0/#!/guide/forms

I expected "User saved successfully." message after I click "submit" button.

My final aim is to save form data into mysql DB but before that I wanted to see
if Extjs and PHP setup is done correctly.

Right now, my PHP file is in same location where view file is
I placed PHP file in <app_name>/save-form.php also but no help. Still I don't get the alert message as what PHP is sending back.
Please note that I have not created any data store or something yet.

I doubt that my PHP file is not in right location and so PHP file is not accessible.

All I'm trying to do is, create a simple application where I can insert, update/edit and delete data in table using a form (Extjs 4 + PHP) and display DB data using grid.
Any help from you is highly appreciated.
I'm not sure if I'm asking for too much but if you can provide a small sample code as an example using MVC which includes insert/update/delete on DB as well as display of DB data using grid, would be much much helpful to me and probably other new people who want to learn extjs 4.0 and use it in their PHP web application.

If you need any more details, I'll be happy to provide.

Thanks in Advance,
Anurag Singh

12 Mar 2012, 8:39 AM
echo '({ "success": true, "msg": "User added successfully" })';

Will not send valid JSON back, it should be:

echo '{ "success": true, "msg": "User added successfully" }';

Have you looked at the Network tab to see if the request was made and what the response was?

12 Mar 2012, 10:37 AM
ok, I changed my code a bit and seems working.

My earlier code was (You can see how I set url, and how Submit button handler is written, The way it was given in the guide):

Ext.define('AM.view.Simpleform', {
extend: 'Ext.form.Panel',
xtype : 'simpleform',
renderTo: Ext.getBody(),

title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
defaultType: 'textfield',
defaults: {
anchor: '100%',
labelAlign: 'top'
url: 'save-form.php',

items: [{
fieldLabel: 'First Name',
name: 'first',

buttons: [{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm(); // get the basic form
if (form.isValid()) { // make sure the form contains valid data before submitting
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
} else { // display error alert if the data is invalid
Ext.Msg.alert('Invalid Data', 'Please correct form errors.')
text: 'Cancel'


Here if I submit, I get error as:
Uncaught Ext.Error: No URL specified ext-debug.js:8460

I put few more alert in setOptions function in src/data/Connection.js and found that url is null.
Means due to some problem in above view code, url is not passed.

Then I looked at http://www.sencha.com/learn/ext-js-grids-with-php-and-sql
where I see a bit different way to write Submit Handler and I modified my handler code as below (rest code same):

buttons: [{
text: 'Submit',
handler: function (){
waitMsg: 'Please wait...',
url: 'save-form.php',
params: {
success: function(response){
var result=response.responseText;
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error', 'could not connect to the database. retry later');
text: 'Cancel'

Now I can see the php return JSON message here as alert.

Please advise what is the right way to call PHP. Also if my current modified code is the one which should be used, then how to pass the form element values to PHP. I guess something need to be added in params.

Thanks in Advance,
Anurag Singh

12 Mar 2012, 11:36 AM
i think mitchell can help you in your code, as is so similar to the online example,

but if you are starting, i recomend you to start using models and stores, and not using any graphic stuff yet,
you just need like 3 lines of code to load data and save it back, after you learn that and be sure data sent from server to the client is right and the data from the client to the server is right, which mean u can load data and save it back, then go graphic mode, just beacuse is more simple, needs just a few lines and you can print the results to some developer console.

something like

someStore = load(); // check the http request with a developer tool like in chrome ctlr+shift+i

after you see the params sent to the server are right then try to display the loaded records just using the console.
something like

someStore = load(callback:function(){
someStore.each(function(record) {
console.log( record.get('someField'))

its need way less code than starting in Exjs using forms

someStore.sync(); // check the data sent back to the server using devloper tools

after that you can load records to the form using something like form.loadRecord(someRecord); and somerecord.set(form.getResults()); then someRecord.save(); its more clear to check all the process and whats happening in every step.

just ideas to help you start using less code than a whole ui object with random errors :d

Justin Noel
13 Mar 2012, 6:26 AM
You may find my ExtJS MVC (https://github.com/calendee/Ext-JS-4.X-CRUD-Demo)demo somewhat useful.

It shows a very simple ExtJS app with a VERY simply PHP back-end. It will show you the basics of MVC on the front-end.

On the backend, it does not use MySQL for storage. Instead it just uses simply sessions. I think a complete back-end solution is not relevant to an Extjs forum.

I would point out that you really shouldn't be trying to write your JSON response in PHP with echo. It's very hard to get it right and just not worth the bother. Just create an array and then JSON encode it.

Example from HERE (https://github.com/calendee/Ext-JS-4.X-CRUD-Demo/blob/master/customers.php).

$response['customer']['customer_name'] = $form_data->customer_name;
$response['customer']['start_date'] = date('Y-m-d');
$response['customer']['customers_id'] = $_SESSION['max_customers_id'] + 1;
$_SESSION['max_customers_id'] = $_SESSION['max_customers_id'] + 1;
$response['customer']['success'] = true;

$_SESSION['customers'][] = $response['customer'];

echo json_encode($response);