Getting Started

Introduction

If you develop Ext JS applications with a lot of data, you’ve probably spent a lot of development time on data transformation and synchronization with your back-end system. There are lots of ways to transfer data. For our systems, we chose Ext.Direct. Ext.Direct is a specification from Sencha and is implemented in the Ext JS and Sencha Touch libraries.

The Starting Point

We are big fans of CakePHP, a lightweight Rapid Development PHP-MVC-Framework. We decided to build Bancha, which extends CakePHP to provide all data, specifically in the Ext.Direct format. Bancha is doing all of the necessary data transfer, marshalling, and Dispatcher-Enhancements. It serves the data Cake-style inside CakePHP, and in Ext JS-format for the front-end.

Controller methods

Bancha Basic and Bancha Pro allows to expose controller action to be used in JavaScript simply by adding @banchaRemotable as a phpdocs comment to the controller action. How this can be done is described in out documentation in details, see here. Our remote method invocation example also gives you an idea of how it works.

From now on were are describing features of Bancha Pro.

Model Mapping

The extension above is really handy and saves a lot of valuable time. However, we weren’t satisfied, as we were still doing repetitive tasks such as defining model structures, relationships and validation rules, both in PHP, then in JavaScript.  Implementing and relying on human follow-through to keep these systems up-to-date in a team environment increases the risk of human error.

Bancha solves this problem by automatically parsing the CakePHP model schema and creating the correlating Ext JS and Sencha Touch schemas on the fly.

Automatic C.R.U.D. Support

Our next step was to improve on automation by automatically providing full C.R.U.D support for all models where the BanchaBehavior is enabled. The controllers can automatically be created using the CakePHP console, or just add five lines of code to your existing controller classes to enable the automatic C.R.U.D. support. With this enhancement, you can achieve automatic C.R.U.D. support for any CakePHP model, without needing to implement additional JavaScript.

Bancha Scaffold

One of the biggest strengths of CakePHP is a focus on rapid application development. We took that concept to heart and implemented scaffolding within Bancha, reducing overall development and testing time.  

Example

First install Bancha, download from here, and follow the installation instructions. Now, let’s go through a typical rapid development process with CakePHP. We start by defining the data structure by creating our database tables for a bookstore:

CREATE TABLE `books` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `title` varchar(32) NOT NULL,
    `author` varchar(32) NOT NULL,
    `publish_date` date NOT NULL,
    PRIMARY KEY (`id`)
)
INSERT INTO `books` VALUES
    (1, 'JavaScript: The Good Parts',
        'Douglas Crockford', '2008-05-16'),
    (2, 'The Ultimate Hitchhiker''s Guide to the Galaxy',
        'Douglas Adams', '2002-04-30');

Next, we’ll start the process in CakePHP to create the first prototype of our application. CakePHP provides a command line tool to “bake” models, controllers and views based on the database schema. The Bake console can create any of CakePHP’s basic ingredients: models, views and controllers. While you can limit it to skeleton scaffolding, CakePHP's Bake can create a fully functional application in minutes. With Bancha, we extend that behavior to automate C.R.U.D. support.

To scaffold the entire M.V.C. for our books table, we use Bake. At the shell, type Console/cake bake all; as a template, we select “bancha”.

Now, we can setup Bancha to expose the model by adding a line into the model: public $actsAs = array("Bancha.BanchaRemotable");.

You're done -- well, at least on the CakePHP Bake side. Your back-end is configured and generated, ready to test and modify by adding business login to the controllers.

The JavaScript Part

Now, we will scaffold a book management page. Bancha.Scaffold helps you rapidly generate grid and forms from minimal input. We’ll bring all of the pieces together in one main page of our new application:

// activate Ext.Loader to load dependencies
Ext.Loader.setConfig('enabled', true);

// include Bancha via Ext.Loader
Ext.Loader.setPath('Bancha','/Bancha/js'); // path to Bancha folder
Ext.syncRequire('Bancha.Initializer');

// start your app
Ext.application({
    name: 'Bancha Example',
    requires: [
        // require the book model
        'Bancha.model.Book',
        // require Bancha Scaffold
        'Bancha.scaffold.form.override.Panel',
        'Bancha.scaffold.grid.override.Panel'
    ],
    launch: function() {
        // Ext JS is ready, now build the panel
        Ext.create('Ext.grid.Panel', {
            title: 'Book Grid with full CRUD support',
            scaffold: 'Bancha.model.Book'
        });
    });
});

 

Happy coding!

This was a first glance at Bancha. Check out our tutorials, documentation and screencasts, or directly install Bancha: Installation Instructions Download

Screencast

The Result

The final Code