Sencha Cmd: Native and Web Packaging¶
Note: Please upgrade to Bancha 2.4 for this improved integration.
Sencha Cmd is able to convert a Sencha Touch application into a first-class, mobile application that has access to device functionality and can be distributed in App Stores.
To use any of these features Bancha needs to play nicely with Sencha Cmd. This post will describe how Bancha can be used with Sencha Cmd. You can find an introduction into Sencha Cmd in the Sencha Docs.
Integrating with Bancha¶
For this to work, Sencha Cmd needs to be aware of Bancha. To do so simply follow these two steps:
When you have created an app (sencha generate app <appName> <path>), a folder .sencha will be available inside your project. Augmenting these configurations will allow Sencha Cmd to understand Bancha.
In your project open /.sencha/app/sencha.cfg and add the following configurations
# Configure the path to your CakePHP root bancha.baseUrl=http://my-local-host.com # Configure the relative path from the app to the Bancha plugin folder bancha.folder.relative=../../Plugin/Bancha
Please make sure to replace http://my-local-host.com with your local path to your CakePHP application.
Include the Bancha build logic¶
This part is straight forward, simply add the following lines into your /.sencha/workspace/plugin.xml inside the project tag:
<!-- Add Support for Bancha -->
<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>
Debugging Production Builds¶
Debugging production builds can be pretty tricky, especially because content will not be reloaded when you reload the page in the browser. The packaged version uses the app cache, so if you want to reload all the data you need to remove all app cache entries.
In Chrome you need to first delete the manifest file:
- Open the url chrome://appcache-internals/ and remove the App Cache entry.
- Click on the menu Menu > Tools > Clear Browser Cache.
- In the new window select both "Clear Cookies and other Website and Plug-in Data" and "Clear Cache" and click "Delete browser cache"
Now when you reload the page all data is retrieved again from the files.
After adding a few lines to Sencha Cmd files, you are able to package Bancha apps. Calling sencha app build production from within your app directory will generate a packaged version of your app, including Bancha’s Remote API and model definitions.