Usage in Ext JS/Sencha Touch

Inside your Sencha Touch/Ext JS application you simple need to require the model class in the Bancha.model namespace.

In most cases you will use a store to load data. The minimal definition for a store of articles is:

Ext.define('', {
    extend: '',

    requires: ['Bancha.model.Article'],
    model: 'Bancha.model.Article'

To load data you will simply need to create an instance and call the store's load method:

var store = Ext.create('');

To only load one record via the id property you can also use the static load method:


Pagination, Remote Sorting and Filtering

Loading of paginatied data, remote sorting and filtering works out of the box. Simply configure your store as you need it. For example:

var store = Ext.create('', {
    requires: ['Bancha.model.Article'],
    model: 'Bancha.model.Article',
    remoteSort: true,
    remoteFilter: true,
    pageSize: 10
store.sort('title', 'ASC');

Bancha will give each store by default to the option to filter on associations. For security reasons other filtering is by default prevented. If you want to expose filtering on other columns, please configure this in CakePHP.

Associations: Linking Models Together

Note: Since Bancha 2.1 now also support sending of nested associated data. This makes your apps even faster.

Defining relations between different objects in your application should be a natural process. For example: in a article database, a article may have many comments, articles have a single author, and authors may have many articles. Defining the way these relations work allows you to access your data in an intuitive and powerful way.

Bancha will share all associations defined in CakePHP and also send associated data to the browser. Let's take a deeper look. Depending on your CakePHP's controller index action, you might already have the associated data loaded or not. For details on this read here about setting up the associations in CakePHP.

Using already loaded associated data

If the associated data is already loaded, you can simply access and directly use it. For the above example, if you habe an Author record in the variable author, you can get a store of all his articles via author.articles(); For has many associations there will always be a function in the plural form, which will return a new store of all associated articles.

To access hasOne or belongsTo associations you neet to use a get + model name function. For example to get the user from an article record, you would use article.getAuthor();

Loading associated data from the server

In some cases you might not have yet loaded the associated data from the server. In these cases you need to load the store for has many association. To do the same as above you would now use:

var articles = user.articles();
articles.on('load', function() {...});

The same works for belongsTo and hasOne associations, in this case you can use:

    callback: function(user, operation) {
        /* what should happen when the data is loaded */

See also your associations example.

Tip: Please not that Sencha Touch/Ext JS only shows the associations when the associated model is also loaded.


Bancha automatically recognizes when a model uses the CakePHP TreeBehavior and correctly transforms the data for a Sencha Touch and Ext JS Everything is already pre-configured, so you only need to use the Bancha model with a TreeStore.

var store = Ext.create('', {
    model: 'Bancha.model.Task'

See also our tree example.

Plugins (New in Bancha 2.2.0)

Bancha also supports to expose any model inside a CakePHP plugin. The exposing in CakePHP works exactly the same (add a BanchaBehavior to the model), to now use it you need to add the Plugin name as namespace. Let's say you have an plugin called Comments with model called Comment. Simple require and use the model 'Bancha.model.Comments.Comment'.

Bancha Scaffold

Bancha also includes Bancha Scaffold, a library for rapidly scaffolding grids and forms. This is the perfect tool if you are nto using Sencha Architect and still want to get prototypes fast. Bancha Scaffold perfectly integrates with Bancha, it uses all the Bancha meta data to create grids and forms from a minimal markup. For example:

Ext.create('Ext.grid.Panel', {
    title: 'User Grid with full CRUD support',
    renderTo: 'content',
    scaffold: 'Bancha.model.User'


Internally Bancha has a Bancha Remote API which is defined at /bancha-api/models/all.js. In this file Bancha tells the frontend all the exposed controller methods and the model schemas. This data is then used in Sencha Touch/Ext JS to create the exposed models.


Add a comment