Skip to content

January 10, 2011


How to use Ext JS CRUD PHP example

by Joe Kuan

Ext JS CRUD enables Store object to perform create, read, update, destroy through a common interface in MVC style. In the example, Sencha provides a demo example of CRUD operations. In here, I describe how the backend PHP sides work along with CRUD.

In order to bind CRUD to your PHP server side operations, you need to define your type of data access page (in this example is users) for both controller and model sides which are located in remote/app/controllers/users.php and remote/app/models/user.php respectively. The model provides direct data operations to the storage and passes the results to the controller side which then packs the results into JSON with specific fields. An example of controller is already provided in controllers/users.php and this should be a standard template for other data access whereas models/user.php requires proper implementation.

Ext JS CRUD From Client Side to Server Side
First, a HttpProxy object is declared with API on each CRUD operation.

In the example, the URL for read API is declared as


according to the code in remote/lib/request.php (which is loaded from remote/init.php), it breaks down the URL path into specific components


which assigns the parts into PHP Request object as

$request->controller = 'users';
$request->action = 'view';

Note that there are other path syntax supported to parse into Request object.


whereas id must be in numerical format

Then according to remote/app.php, it looks for the controller, users.php, and includes the file.

remote/app/controllers/$request->controller' . '.php'

Finally, app.php calls for the function


that further invokes

// Which is $Users->view()

The $Users->view function is defined in controllers/users.php, then calls static method $User::all defined in models/user.php.

The mapping between controller and model for the users example is summarised in the following table:

Controller Model
File controllers/users.php models/user.php
PHP Class class Users extends ApplicationController class User extends Model
Read $Users->view $User::all
Create $Users->create $User::create
Update $Users->update $User::update
Destroy $Users->destroy $User::destroy


If you need to issue an error exception of create failure, you must return $response->data with an id attribute regardless of the value. Otherwise the exception won’t work.

11 Comments Post a comment
  1. Mar 23 2011

    Can you please provide the code implementation for app.php, user.php and related php files. I was not able to find any of this on the ExtJs sample/support/documentation pages.


    • Joe Kuan
      Mar 23 2011

      In your downloaded ExtJS package, the php files are located in both examples/writer and examples/restful directory. The User example is in examples/writer and you should also find app.php.

      You need to put the content of the directory ‘remote’ on your server side.

      Hope this helps

  2. paneg
    Jun 18 2011

    hei,…. canyou give example about extjs4 with php and mysql…

    • Joe Kuan
      Jun 18 2011

      Sorry, I am still using ExtJS 3 at the moment. However, I will move on to ExtJS 4 very soon.

      • panega
        Jun 19 2011

        oh ya, thanks Joe keep posting….

  3. Jul 27 2011

    good. thanks

  4. Arnie Shore
    Aug 11 2011

    Joe, keep on posting; here’s one more lurker appreciating your work and looking hard for more of the same. I’m especially interested in CRUD data types supported, like ENUM and the several date/time variants.

  5. Feb 3 2012

    Joe I have copied ‘app.php’ and the contents of the directory ‘remote’ on my local webroot and am have difficulty understanding the writer.js, mainly the: api: {read: ‘app.php/users/view’, create: ‘app.php/users/create’, update: ‘app.php/users/update’, destroy: ‘app.php/users/destroy’}. I know that they are function within the user.php although for example how do I include the – read: ‘app.php/users/view’ to point to the public function view() {
    $res = new Response();
    $res->success = true;
    $res->message = “Loaded data”;
    $res->data = User::all();
    return $res->to_json();

    hope this is understandable, thanks

    • Joe Kuan
      Feb 4 2012

      I am afraid you have to really understand the source code in remote/lib/ directory. But I try to explain in ultra detail.

      When your webserver receives the url ‘app.php/users/view’, the webserver will access the app.php first because it is the first identifiable component.

      Then your webserver executes the app.php, it loads up the CRUD libraries and instantiates an object from Request class. The constructor of Request class will break up the ‘app.php/users/view’ path into controller (users) and action (view) components (See remote/lib/request.php).

      The next instruction in app.php is to instantiate a Controller class object defined in ‘remote/app/controllers/users.php

      require('remote/app/controllers/' . $request->controller . '.php');
      $controller_name = ucfirst($request->controller);
      $controller = new $controller_name;

      As the Users class extends from ApplicationController class which is defined in remote/lib/application_controller.php, the request is executed via the instantiated controller object ‘Users’.

      // Dispatch request
      echo $controller->dispatch($request);

      Since the definition of CRUD operations is associated with specific HTTP methods, ie create -> POST, view -> GET, update -> PUT, destroy -> DELETE, your ExtJs application will fire a GET request for the url ‘app.php/user/view’.

      As the controller object receives a GET request which corresponds to it’s view method (ie Users::view()), it then calls corresponding model’s ‘view’ method User::view() in remote/app/model/user.php.

  6. Kevin Angulo
    Mar 30 2012

    POG+ExtJS = RAD – Make a CRUD Form in a few clicks

    Check this out,

    Make Interface (with ExtJS), Server Logic (Php Classes) and Database (MySQl DLL), just following a wizard you can make a CRUD form very quickly and easy, in a few clicks you get a form ready for add,update and delete operations. Best Regards

  7. Good Article!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: