Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


#Sencha Touch

Visit the Sencha Touch 2 page on the PropertyCross website for screenshots and code sharing metrics.


Sencha Touch is a framework for building cross-platform mobile application using HTML5 technologies. Similar to ExtJS, Sencha Touch provides a fully functional JavaScript API and a structured MVC approach for building mobile applications. Coding is done (almost!) exclusively in JavaScript - with the majority of the HTML and CSS being abstracted away behind the concept of "components", which are configured and generated by the JavaScript code.

The PropertyCross implementation does not use any additional tools or libraries beyond those supplied by Sencha, with one exception - it makes use of PhoneGap Build to build and package the application as a native app (although it does not make use of the PhoneGap APIs itself). This implementation also uses the "Sencha" 2.3.1 themes to style it - mimicking the default look and feel of native applications for iOS 7, Android and Windows Phone 8.

Building the Application

Applications developed with Sencha Touch can be run directly within a web browser control. Because the application uses XHR in order to load templates, if you run the application from your local file system you will encounter problems due to the same origin policy. You can solve this either by serving the app from a web server, or by using one of the Chrome switches that disables this policy.

We have been unable to get the successfully produce a native package using the native packaging guide so have opted to build the native binary using PhoneGap instead. N.B. This doesn't seem to be an uncommon approach from a quick search of their forums but we would ideally use their tooling if it worked. For Windows Phone PhoneGap is the recommended packaging method.

    sudo gem install haml
    sudo gem install haml-edge
    sudo gem install compass
  • Open a terminal (must be cmd on Windows) and run -
...\senchatouch2>sencha app build --environment package
  • Create a zip archive out of the build/package/PropertyCross folder and upload it to PhoneGap Build.

##Application Structure

  • src\
  • .sencha\ - Sencha project and workspace files.
  • app\controller\ - Contains the application business logic.
  • app\model\ - Configures persisted model objects.
  • app\store\ - Sencha data stores representing either collections of data loaded from the server, or persisted model objects.
  • app\util\ - Simple utility functions.
  • app\view\ - The various Sencha views used by the app.
  • resources\ - The Sencha standard styles and customisation (SASS/CSS).
  • touch\ - The Sencha Touch framework JS files.
  • app.js - The application bootstrap.
  • app.json - Application metadata/config.
  • build.xml - Sencha build process configuration.
  • index.html - The host HTML page for this app.
  • www\
  • assets\ - icons and splashscreens used by PhoneGap, these are generated via the PropertyCross build system.
  • config.xml - The XML file that is used by PhoneGap Build in order to package the app.
  • phonegap.js - The PhoneGap JavaScript APIs.
  • stats-config.json - Used by the PropertyCross build in order to compute code sharing metrics.