Sencha Architect 3

Sencha Architect is a great tool for creating ExtJS and Sencha Touch applications. In this article we will show how you can easily use Bancha and Sencha Architect together. For general information about Sencha Architect, please go to the Sencha Website.

Tip: Setting up Sencha Architect inside your CakePHP app/webroot folder makes it easy during development to always work on the current code without a build step, simply open localhost/sencha-architect-project-name/ in the browser. If using a subfolder, for development use localhost/my-subflder/app/webroot/sencha-architect-project-name/.

Setup Sencha Cmd

Sencha Architect 3 leverages Sencha Cmd in the background. To configure it, in your project open /.sencha/app/sencha.cfg and add the following configurations:

# Configure the path to your CakePHP root bancha.baseUrl= # Configure the relative path from the app to the Bancha plugin folder bancha.folder.relative=../../Plugin/Bancha

Please make sure to replace with your local path to your CakePHP application.

Now please add to the file /.sencha/workspace/plugin.xml inside the project tag:

<!-- Add Support for Bancha -->
<import file="${app.dir}/${bancha.folder.relative}/_sencha/build.xml"/>
<target name="-before-app-build" depends="-bancha-before-app-build"></target>
<target name="-before-app-refresh" depends="-bancha-before-app-build"></target>
<target name="-after-app-build" depends="-bancha-after-app-build"></target>
<target name="-after-app-refresh" depends="-bancha-after-app-build"></target>

Now everything is ready to use Bancha in Sencha Architect.
(The Bancha 2.2 and 2.3 SkriptTagInitializer is not needed anymore)

Creating Bancha models

Sencha Architect: Bancha Model Creation

Follow these steps to create a new Bancha model:
  1. Create a new Model
  2. Set userClassName to the CakePHP model name (e.g. User)
  3. Add a new config 'bancha' and set it to true
  4. Add Bancha.Initializer to the models requires property

Because Sencha Architect 3 does not provide an dynamic way to augment the data, we can't display the available model fields inside Sencha Architect. Of course, in the browser Bancha will automatically inject all the fields, validation rules, associations and proxy configuration.

Using CakePHP Controller Methods

Sencha Architect: Bancha Controller Method Usage

Beside the model features you are also able to directly invoke any exposed CakePHP controller method. Simply use Bancha.getStub() to retrieve the stub and call the method on it. For more information read about using controller methods.


Demo Project

We have created an example app using the above described integration with Sencha Architect. It handles authentification, has different user levels and uses MVC. Here are the resources:

Example App
Full Code on GitHub


Add a comment