Results 1 to 2 of 2

Thread: Sencha Touch works fine with Appcelerator Titanium

  1. #1

    Thumbs up Sencha Touch works fine with Appcelerator Titanium

    I used Sencha Touch when it was originally released, but then went on to other projects. Now I want to build a desktop + mobile application, and am back again :-)

    Basically, I like how Sencha adapts the UI between screen sizes. So with just one UI I can work with different devices. (This is fine for me since I have a very simple UI)

    I reviewed (again) all options - Sencha, jQuery Mobile, Titanium, Phone Gap, Adobe AIR... Couldn't find a definitive answer that Sencha Touch will work with Titanium. That was my preferred option. Mainly because Titanium offers a lot more APIs and works on the desktop too. I found jQuery Mobile to be too slow and Phone Gap was only for mobile.

    So if Sencha Touch worked with Titanium - both for desktop and mobile, I would be all set.

    And it does.

    Creating a desktop app like this was not a problem at all. I actually just sym-linked Titanium's Resources folder to Sencha Kitchen Sink app's resources folder (which contains the index.html) and it worked beautifully! I had to fix the sencha-touch.js and sencha-touch.css file paths, but overall this worked without a hassel.

    Creating a mobile app was slightly different. Titanium recommends you use native apps for mobile and hence gives you an app.js file to begin with.

    So I used that as a shell Titanium app. It creates a WebView and loads Sencha's index.html into it. Sencha takes over from here.

    Here's the app.js code:
    var win = Titanium.UI.createWindow({
    var web_view = Titanium.UI.createWebView({
      url: 'index.html'
    Again, I had to fix the sencha-touch.js, autotheme.js and sencha-touch.css paths.

    And this worked fine as well!

    The only glitch: data stores loading JSON via AJAX Proxy don't work. This is because local file access is not permitted from a WebView.

    The workaround? I simply copied JSON data to another JS file. Created a EXT.JSONDATA object and pushed all JSON files as properties in this.

    Ext.JSONDATA = {};
        Ext.JSONDATA.carregions = {
        "text": "Cars",
        "items": [{
            "text": "Asia",
            "items": [{
                "text": "Japan",
                "items": [{
                    "text": "Acura",
                    "leaf": true
                    "text": "Honda",
                    "leaf": true

    Remember that I loaded the full Kitchen Sink to see if everything worked.

    This was very exciting! And I thought I should post it here so anyone who's trying to do similar knows it can be done! And without much trouble!

    As for performance: it did take a couple of seconds to load the app, but once it was loaded, it was just as fast as Kitchen Sink web app!


  2. #2


    cool, I had assumed this would work, just hadn't got around to testing it.... thanks very handy little run through

Similar Threads

  1. Using sencha touch with appcelerator?
    By stevek in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 29 Jul 2011, 9:49 AM
  2. Anyone compile a Sencha Touch app using Titanium?
    By olin in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 31 Aug 2010, 11:23 PM
  3. Replies: 3
    Last Post: 22 Apr 2010, 4:30 AM
  4. Ext wrapper for Appcelerator Titanium
    By RobSmith in forum Community Discussion
    Replies: 3
    Last Post: 6 Oct 2009, 11:39 PM
  5. Replies: 3
    Last Post: 27 Feb 2009, 1:31 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts