• Home
  • About

ExtJS Ajax-Communication with PHP

Posted by flexnrosescom on April 26, 2012; This entry is filed under Javascript.
Tags: ajax, extjs, Flex, full application, mysql, php

Hi, i have just read in the last week documentation regarding ExtJs. My personal reviews are it is a very intuitive framework. I have spend a lot less time learning what I have accomplished here compared to the times of Adobe Flex 3.

This application is in part some fragments of other tutorials I have gone through Sencha ExtJS Documentation. I was able to put together this small application which uses PHP as its backend. I think is a valuable demo as you might want to try Java, .NET, or another technology instead of PHP.

 


Demo I

Static content in php to send to ExtJs Application. Within one JS file,  you get a taste of the Model, Store, and a datagrid. Here we make use of Model, and Store. The Store was a Flex flashback to ArrayCollection in a way but being directly bound to an HTTPRequest object.

url: http://blog.flexnroses.com/source/tutorial/extjs/proxy_demo/static_ajax.php

php file called: http://blog.flexnroses.com/source/tutorial/extjs/proxy_demo/php/static_ajax.php?action=read

 


Demo 2

Here the only difference is the php file now is able to call a page which is loading its content from a database table. Still no use of MVC pattern.

url: http://blog.flexnroses.com/source/tutorial/extjs/proxy_demo/dynamic_ajax.php

json: http://blog.flexnroses.com/source/tutorial/extjs/proxy_demo/php/dynamic_ajax.php?action=read

 


Demo 3

This time we use the MVC pattern from ExtJS, and we start to include two controllers to detect mouse click actions in different views for us to now CRUD the data in the database table.

I figured after a few test that the communication involved post data being sent to PHP. So I managed to retrieve it and decode it from Json format.

Instructions: double click any record in datagrid, and you can edit and save your changes, or delete.
In the main application there is also a button to create a new record.

Note: As far as this example has gone, it has no bells and whistles. It lacks validations, and update status upon CRUD operations. That’s something coming next.

URL: http://blog.flexnroses.com/source/tutorial/extjs/proxy_demo/ajax_app.php

PHP: same file as the one before.

 


The goodies

If you test my application, you can see updates in this log text file.
http://blog.flexnroses.com/source/tutorial/extjs/proxy_demo/php/logger/error_log.txt

Last but not least, you can get the joy of this application and make use of it for your current learning. You can download it here, and also get the mysql file to test.

As a good neighbor share your thoughts and any suggestions to improve my ongoing learning. I plan ahead to go into using Direct, Session, and LocalStorage.

:) gracias

Leave a Reply

Categories

  • Actionscript (19)
  • Android (3)
  • CSS (2)
  • Design Patterns (4)
  • Flex (18)
  • Geek (2)
  • Javascript (12)
  • PHP (3)
  • Wordpress (1)

RSS

  • RSS Blog
  • RSS Comments