CakePHP integration with ExtJS 3

Question

Hello, I am a PHP and ExtJS user. I am looking into developing an application using a good PHP framework (CakePHP; good as in "I consider this good for me") and ExtJS version 3. What I would like to achieve is a complete Ext viewport with many grids and functions that would call PHP urls for retrieving data, saving data, edit/remove data (not just for grids, also for treepanel and such). I would like to use CakePHP as backend with all its capabilities for executing these functions. My first goal is to integrate the obAuth component (or any other secure authentification plugin for CakePHP) with an ExtJS 3 login interface. I am searching for the best method of combining these too so that I can easily restrict functions based on the usergroup access. I am thinking of a setup where the logged in user makes one post from Ext regarding the execution of a function and the CakePHP response made present as errors or notifiers through Ext alert boxes.

Do you think this is possible ? Any thoughts of an ideal config for this ?

Thank you.

Answer 1

If you're going back and forth between JavaScript and Cake a lot the first thing you might want to do is override or extend the default View class so it'll package variables you set in the controller automatically into a JSON array or whatever you prefer. That'll save you from having to make a view for each action and/or overriding the layout each time. Study cake/libs/view/view.php and/or cake/libs/view/media.php, you can create custom views in app/views/.

Make use of the RequestHandler Component a lot to reuse logic both for normal views and AJAX.

Beyond that it's normal JS with a PHP backend.

Answer 2

This is actually very easy. First, integrate the obAuth Component into a basic CakePHP install, to see if it works properly and doesn't have any strange quirks. Once that's done, get to work on your frontend.

Your frontend should be designed entirely with ExtJS components. Either design your frontend with ExtJS or via HTML templates, but try not to do both, as it gets confusing and hard to maintain. I recently did this, and every controller action had a view that set up the DOM with some basic elements (a header for the page, any divs I needed to bind components to, and the .js file that was specific to that page/view).

Then, make your application RESTful. All of your ExtJS components can read data from a DataStore (or can just take a URL as the data source), so you just give them the paths you'd like and you're done.