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).
    Alternatively you can use the Bancha composer plugin.
  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:
    /**
     * Bancha Basic requires this for compatibility
     * with the CakePHP RequestHandler
     */
    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

Add a comment