1. Fork on GitHub (Bancha Scaffold is also included in Bancha)
  2. Add Bancha Scaffold:
    • Either include the file latest-build/bancha-scaffold-debug.js in your page or
    • Add the following code snippet:
      Ext.Loader.setPath('Bancha.scaffold', '/path/to/src');
      // and require the following overrides
          requires: [
  3. Optional: The default scaffold configs use images in the buttons. In the samples we use FamFamFam-icons, if you like them, download them to img/icons and add following css to your styles:

    .icon-add {
    background-image:url(/img/icons/add.png) ! important; } .icon-save {
    background-image:url(/img/icons/disk.png) ! important; } .icon-edit{
    background-image:url(/img/icons/user_edit.png) ! important; } .icon-destroy {
    background-image:url(/img/icons/delete.png) ! important; } .icon-reset {
    background-image:url(/img/icons/arrow_undo.png) ! important; } .icon-upload {
    background-image:url(/img/icons/image_add.png) ! important; }



To start using Bancha Scaffold please check out our example and dive deep with our API docs.


Why are my associations not recognized?

Ext JS 4 only uses associations if the associated model is already loaded as well. If you have for example a model Article which belongs to a User, for Bancha to scaffold a combobox for the articles user you need to load the User model first. Loading all associated models before rendering can look like this:

    function() {
        // all models are ready, build panel
        Ext.create('Ext.form.Panel', {
            title: 'Article has a Combobox for User selection',
            scaffold: 'Bancha.model.Article',
            renderTo: 'content'

How can I set the display field of an associated record?

By default Bancha Scaffold looks for fields called 'name', 'title' or 'code' as display fields for associated data. So when I show a grid of articles and there's a user_id field, Bancha Scaffold will use the User model's name field.

If you are using Bancha Scaffold together with Bancha, it will automatically take the CakePHP models $displayField.

The simplest way to define your own logic is by overwritting the Util's getDisplayField method. Here's a simple example:

Ext.define('Bancha.scaffold.UtilOverride', {
    override: 'Bancha.scaffold.Util',
    getDisplayFieldNameMap: {
        User: 'modelDisplayField' // use the CakePHP model names, including plugin name
* Uses the map above to determine which display field to choose.
* If there's no entry in the map it will try to guess the name.
*/ getDisplayFieldName: function(model) { return this.getDisplayFieldNameMap[model.getName().replace('Bancha.model.','')] || this.callParent(arguments); } });


API Docs

All possible configurations are explained in our API Docs



Sign up for exclusive Bancha news!