Skip to content

January 10, 2011

11

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

app.php/users/view

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

app.php/controller/action

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.

app.php/controller/action/id
app.php/controller/id
app.php/controller
app.php/id

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

$request->dispatch();

that further invokes

// Which is $Users->view()
$Users->{$request->action}()

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

Exception

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.

Advertisements
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.

    Thanks,
    Vlad

    Reply
    • 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
      Joe

      Reply
  2. paneg
    Jun 18 2011

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

    Reply
    • 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.
      Thanks
      Joe

      Reply
      • panega
        Jun 19 2011

        oh ya, thanks Joe keep posting….

  3. Jul 27 2011

    good. thanks

    Reply
  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.

    Reply
  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

    Reply
    • 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.

      Reply
  6. Kevin Angulo
    Mar 30 2012

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

    Check this out,
    http://pogextjs.comyr.com/pog_extjs
    video:

    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

    Reply
  7. Good Article!

    Reply

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: