Installation

Compability

  • CakePHP 2.1.0 till latest
  • Ext JS 4.0.7 till latest
  • Sencha Touch 2.0.1.1 till latest

Prerequisites

  1. You have downloaded and installed CakePHP 2.
  2. You have downloaded ExtJS 4 and/or Sencha Touch 2

Note that you might have to buy a commercial ExtJS license, see http://www.sencha.com/products/extjs/license/

Installation

  1. Download the Bancha source and place it into the plugins folder of your existing CakePHP installation. (You should then either have a plugins/Bancha or app/Plugin/Bancha folder).
  2. Write at the end of your bootstrap (app/Config/bootstrap.php):
    CakePlugin::load(array(
        'Bancha' => array(
            'routes' => true,
            'bootstrap' => true
        )));
    
  3. Copy the file app/Plugin/Bancha/_app/webroot/bancha-dispatcher.php to app/webroot/bancha-dispatcher.php
  4. Add the BanchaPaginatorComponent to your AppController:
    /**
     * Use the BanchaPaginatorComponent to also support pagination
     * and remote searching for Sencha Touch and ExtJS stores
     */
    public $components = array(
      'Session',
      'Paginator' => array('className' => 'Bancha.BanchaPaginator')
    );
    
  5. For production you may want to add a caching provider, since Bancha uses reflection. For default configuration add this at the end of app/Config/core.php (please make sure you are using the CakePHP 2.1.0+ core.php, otherwise $prefix is not defined):
    /**
     * Configure the cache for Banchas Remote API.
     */
    Cache::config('_bancha_api_', array(
        'engine' => $engine,
        'prefix' => $prefix . 'bancha_api_',
        'path' => CACHE . 'models' . DS,
        'serialize' => ($engine === 'File'),
        'duration' => $duration
    ));
    

Setting up ExtJS

  1. Place ext-all.js and ext-all-dev.js into app/webroot/js/ and the ExtJS resources folder into app/webroot/css/
  2. Include Ext JS initialize Bancha.

    Code for a plain html file:

    <!-- include ExtJS css -->
    <link rel="stylesheet" href="/css/resources/css/ext-all.css" type="text/css" />
    
    <!-- include ExtJS -->
    <script type="text/javascript" src="/js/ext-all-dev.js"></script>
    
    <!-- include your app code -->
    <script type="text/javascript" src="/js/app.js"></script>
    

    Code for cake layouts:

    <?php
        echo $this->Html->css('resources/css/ext-all');
        echo $this->Html->script('ext-all-dev');
        echo $this->Html->script('app'); <!-- your app code -->
    ?>
  3. Load Bancha in your app code: Add the following to the top of your app.js:
    Ext.Loader.setConfig('enabled', true); // enable the Ext.Loader
    Ext.Loader.setPath('Bancha','/Bancha/js'); // path to Bancha files
    Ext.syncRequire('Bancha.Initializer'); // load
    

Setting up Sencha Touch

Create a new project using Sencha Cmd or Sencha Architect. When you use Sencha Cmd, simply add the following code to the top of your app.js:

Ext.Loader.setConfig('enabled', true); // enable the Ext.Loader
Ext.Loader.setPath('Bancha','/Bancha/js'); // path to Bancha files
Ext.syncRequire('Bancha.Initializer'); // load

For Sencha Architect please follow this article.

Trouble shooting

After you have successfully finished installation you can open the page /Bancha/setup-check.html to find any installation problem.

For questions write us a mail: support@banchaproject.org

Comments

Comment by Robert |

when i try to add this line Ext.Loader.setPath('Bancha','app/Plugin/Bancha/webroot/js');
i get this error: "NetworkError: 404 Not Found - http://10.12.7.16/correo/app/Plugin/Bancha/webroot/js/Initializer.js?_dc=1411045594785"

How can i refer to the Bancha files? cause i think that CakePHP don't let me do that way. Feel free to use the forum for further questions.

Reply by Roland Schütz

CakePHP automatically exposes the content of any plugins webroot. Therefore when you follow the instructions and use Ext.Loader.setPath('Bancha','/Bancha/js'); CakePHP will transform this path to app/Plugin/Bancha/webroot/js.

Add a comment