Sencha Touch 2 Beta—Raising The Bar

Two years ago, we set out on a journey to make the web mobile. Today, we’re raising the bar with the release of Sencha Touch 2 Beta.

Thank you to our community for your feedback during our sneak peaks with our Preview Releases. Your contributions in the forums, reporting bugs, adding feature requests, and your inspirational teamwork in the Q&A threads have kept us focused on what’s really important to you–delivering quality. We’ve taken all your feedback and we’re proud to deliver a release that we hope will exceed your expectations.

Download Sencha Touch 2 Beta   View Release Notes

*UPDATE*: Sencha Touch 2 RC is now available. Go download that instead!

h3. What’s New?

With every major release, we strive to bake in the latest innovate approaches to help you create impressive applications. And learning how to use these techniques is now easier than ever.

h4. API Documentation, Guides, and Examples

We’re investing a great deal of time in creating comprehensive documentation for Sencha Touch 2. Every major class now has a full introduction complete with code samples and how it fits into the wider context of your app. As well as class docs, we’re adding over 20 brand new guides covering everything from getting started through to building and deploying your applications.

On top of this, our documentation center now allows you to experiment with inline code editing.

Sencha Touch 2 Docs

Touch 2 Docs feature 20 new guides, code samples, and editable examples.
Visit the Touch 2 Docs

We’re continuing to lead the way when it comes to innovation in our learning materials. We’re also proud to continue sharing all of the hard work we put into our documentation tools under the open source JSDuck project, a part of Sencha Labs.

Jog with Friends, a new Facebook example app in Sencha Touch 2

h4. New Facebook Integration Example

We’re adding an example showcasing Sencha Touch’s seamless integration with the Facebook Graph API. Jog With Friends combines the Facebook JavaScript SDK on the client side with a 200 line node.js script backed with MongoDB on the server side. For a live demo, check out on a WebKit browser.

h3. Foundational Improvements

Each major new version of Sencha Touch brings with it an opportunity to advance the state of what can be done with the mobile web. Here are just a few of the improvements we’ve made in Sencha Touch 2.

h4. A New Class System

Sencha Touch 2 benefits from the supercharged class system that powers Ext JS 4. The upgraded system enables powerful new capabilities like dynamic loading, custom builds and new features like mixins. This makes developing your app easier from the first line of code all the way through to creating a minimal custom build that contains only the classes your app actually uses.

As a developer though, the biggest improvement you’ll probably notice is the use of the new config system. Sencha Touch components have always been very configurable, but for version 2 we’ve made a big improvement to the consistency of the API.

Every single configuration can now be set and updated in a very predictable way through the use of generated getter and setter functions. These functions always follow the same format and can be called at any time so once you know the config name you automatically know what function to call to update it:

var panel = Ext.create('Ext.Panel', {
        html: 'Sencha Touch 2 rocks'
alert(panel.getHtml()); // alerts the current value of the html config
panel.setHtml('It sure does'); // changes your panel html to a new value

These functions always follow the same format, which makes learning the framework really easy. As well as the getter and setter functions we provide hook functions which makes it easy to create your own configs–check out the new class system guide to find out more.

h4. MVC with History Support

One of the most frequently asked questions about web frameworks is how to structure your apps to make them easy and fun to create and maintain. With Sencha Touch 2, we’re bringing significant improvements in our MVC architecture, providing new functionality and a cleaner, leaner API.

History support is baked right into Controllers in this new release, making it easy to add back button and deep linking support into your application. We have a full guide on history support and you can see it in action on your device by checking out the upgraded Kitchen Sink example.

Setting up routes is easier than ever–just define the urls your app needs to react to inside your controller along with a function to call when that url is detected. For example here’s how we can easily create an ecommerce application that shows product details when the user navigates to urls like

Ext.define('MyApp.controller.Products', {
        extend: '',
        config: {
                routes: {
                        'products/:id': 'showProduct'  // It’s that easy
        showProduct: function(id) {
                console.log('showing product ' + id);

Check out the full guide on History Support to find out how to add this to your app.

h4. Multi Device Profiles

One of the challenges of a multi-device world is building an application that runs seamlessly across operating systems and screen sizes. With Sencha Touch 2 we provide a simple mechanism that enables you to write your app once then customize it for each device it runs on.

This is achieved by configuring Device Profiles, which usually split your app into Phone and Tablet modes. Define all of the models, views, controllers and store that you want to reuse in your Ext.application and anything profile-specific inside the configuration for each Profile.

For example, let’s say we’re creating a Facebook app and want to show a simple feed view on Phones and a detailed one on Tablets. We can start by telling our Application that it has two profiles:

        name: 'FB',
        profiles: ['Phone', 'Tablet'],
        controllers: []

Now we set up a Tablet Profile that’s activated when we detect that we’re running on a Tablet device:

Ext.define('FB.profile.Tablet', {
        config: {
                controllers: ['Feed'],
                views: ['DetailedFeed', 'Timeline']
        isActive: function() {

And one for Phones:

Ext.define('FB.profile.Phone', {
        config: {
                controllers: ['Feed'],
                views: ['SimpleFeed', 'Timeline']
        isActive: function() {

When the app boots up, it will automatically figure out which Profile to activate and use its specialized models, views and controllers. Check out the Device Profiles guide to find out how to use them in your app.

h3. New Components–Component Data View and Navigation View

In addition to using the new XTemplates in your dataviews, we’re adding one of the most asked for features–using components in your data views. You can now add buttons, or any components, to items.

Touch 2 beta Component Dataview

The KivaTouch demo app uses a Component DataView to show funding progress.

Giving your users the proper visual cues helps your applications flow more naturally. With Sencha Touch 2, wiring up view transitions are now simpler than ever when using a Navigation view. If you choose to use a navigation view, navigational controls such as back buttons will be handled for you. As an added bonus, we’re adding sexy animations when switching between cards.

Sencha Touch 2 Navigation View. View video on Vimeo

h3. Dive In

Now that we’re in beta, we encourage you to dive right in. We have a stable API, and we have more guides to help get you going quickly. If you’re looking to port your Sencha Touch 1.0 app we have a backwards-compatibility build that helps you through the migration process. We also have an upgrade guide to help you out.

Note: those of you who have been using the Sencha Touch 2 Preview releases, be aware that we have cleaned up the builds we generate and as a result you may need to change which build of Sencha Touch you use. Most people should now be using sencha-touch-debug.js while developing, but for a complete list of the builds we generate see the builds guide.

h3. Features We’re Still Working On: Android ICS Performance

Sencha Touch 2 has significantly faster performance on Android 2.x browsers – with fast list scrolling being a particular point of pride. We’ve always treated the browser in Android 3.x as fundamentally broken, and do not plan to officially support it in Touch 2. We are currently working on improving performance in Android 4.0 – the Ice Cream Sandwich release. So far, we have found no acceptable mechanism to achieve fast and flicker-free animations. We have filed a bug with a simplified test case showing poor performance on a variety of mechanisms with the Android bug list. If you’d like to help prioritize this bug, please go to the bug page for Android bug number 24833, and “star” the bug by clicking on the star icon just before the headline. Solving this bug will help, not just Sencha Touch 2, but the entire web community developing content for the Android 4 browser. Feel free to add your own test cases as well!

h3. Summary

We hope you enjoy playing around with the examples, and diving in to building your next great app. It’s been a lot of hard work getting to this point, and we thank you for all the feedback. Please keep sharing your ideas.


  1. Sten Roger Sandvik says

    Wow. The “MVC with History Support” seems nice. Will you port the history code over to ExtJS 4.1 too? Or is it in there already?

  2. Ed Spencer says

    @Sten it’s kind of present in 4.1, but in a different form. I don’t want to speculate too much about future direction of the products but ST2’s approach feels pretty good…

  3. Luis Merino says

    Congratulations on this release. Things are getting very cool, I love the new history, the routing and overall approach, makes things very clean and faster when developing. Again, excellent work!

  4. says

    hi, so exiting!! but in user-interface->list , I can’t access to the last option of list, is this problem just for me ? (I’ve checked it by Google chrome)

  5. AndyD says

    I bet it’s all nice and smooth on an iPhone. I tried it on 3 different Android devices, and the best I can say is: it works. It works on Gingerbread but is still far from fast, it does *not* work on Honeycomb and on ICS I don’t know but I don’t exactly get a warm fuzzy feeling when reading the above blog entry.

    I have been keeping a close look on Sencha Touch and this is now it’s 5th release in the 2.0 line. Every release has the same ending of it’s release notes: ‘Android 3/4 and Blackberry optimizations are not yet in place’.
    This worries me more with each release. Let’s hope that those optimizations actually exist and will really be implemented. Because if not, it is just not interesting to develop apps using technologies like Sencha Touch. The one major advantage: cross device ‘compatibility’ will be a joke.

    Oh, if you consider me ‘just a troll’ then please get yourself an Android device (which the majority of smartphone users own by the way, let us not forget that) and see for yourself, go ahead run that navigation view demo on it.

  6. Ed Spencer says

    @Luis thanks, I think those new MVC patterns are going to be very well received

    @Jaroslaw we’re working closely with the Designer team to bring those features in soon

    @James thanks, hopefully we can expand on that :)

  7. seasharp2 says

    When you say for Android ICS “So far, we have found no acceptable mechanism to achieve fast and flicker-free animations”, does this mean we Sencha user-developers who wish to include animation type features in our apps should steer clear of ICS? Or are you saying the basic touch animation events that are core to many mobiles apps do not function well on ICS.

  8. Alex says

    I’ve been using ST2 PR3 and have been thoroughly impressed with the progress since 1.1. This is a much, much more mature framework. Together with ExtJS 4.1 and the vastly improved docs you guys have been putting out (which blow pretty much everything else out of the water), I really like the direction Sencha has been going.

    Please keep up the excellent work!

  9. Ed Spencer says

    @AndyD thanks for the comment. So far we’ve been optimizing for the device OS versions that are actually out there in the wild. At the moment (thankfully) Honeycomb and ICS only account for 4.4% of all Android devices (see

    The versions that we do support extremely well (2.2+) accounts for 86% of all Android phones, which is roughly 20x more actual devices that 3.x and 4.x combined. We are (right now) working on better support for 4.x but have to allocate our resources wisely, remembering that 3.x and 4.x have some extreme and possibly unsolvable issues with animations, down in the browser itself.

  10. Ed Spencer says

    @seasharp2 we just mean that the browser itself in those versions has serious problems with most animations and that you might want to steer clear of using them on Android devices until a solution is found

    @Alex docs are such a big deal for us, it’s really gratifying seeing all the praise they’re getting. Thanks :)

    @Cecil, Jamie, Ramachandran and Danilo thanks for your enthusiasm, go make something awesome with it!

  11. says

    Awesome guys, excellent work again! The device profile is again one of those things that show you guys really know the problems we (developers) face and solve them pro-actively for us.

    Looking forward to taking it for a spin

  12. Marco Kisten says

    I can only agree with AndyD
    The one major advantage: cross device ‘compatibility’ will be a joke.

    Regardless how fantastic Sencha Touch is, if it sucks on Android I can also develop nativ iOS Apps.

  13. Mark Francis says

    Absolutely blown away by this, it’s beta but already way superior to 1.x stable and jquerymobile is light years behind. Can’t believe you give this away for free, thank you!

  14. Arjen says

    “If you’d like to help prioritize this bug, please go to the bug page for Android bug number 24833, and “star” the bug by clicking on the star icon just before the headline.”

    I have marked the star. I hope many people follow. Please tweet about it in suport of higher priority.

  15. Ed Spencer says

    @Arjen thanks for your support, we actually got some rapid progress on the issue from the Android team on this one – we’ll update you shortly on that

    @Don that’s a little outside my purview, don’t think it will be simultaneous with 2.0 GA but should be not long after it

  16. bens says

    Can anyone tell me if there is any touch/event calendar code available using sencha touch 2.I tried the sencha touch 1 is working.but when i tried to change the code to sencha touch 2 its showing errors.Pls do help.its urgent

  17. Steve says

    Sencha is comming along well on the iOS and Android front. The question is Windows 8 Metro Apps which can be developed directy within the WinRT environment. What is Sencha’s views on this?

  18. Todd Zmijewski says

    If only it gracefully degraded w/o JavaScript … we can’t everything right. – great work so far. Hyped for the production release. Though beta is looking pretty good once I was able to get over the few humps going from pr3 – beta. That said even at the prototype stage people are already bugging me about Windows and Opera mobile browsers. Are there any future plans to provide compatibility with these browsers after general release?

  19. Ed Spencer says

    @AndyD yup, plus Chrome is on a great trajectory (more on that soon)

    @Steve Metro looks very interesting, we’re keeping a close eye on it

    @Todd yea the stuff between PR3 and PR4 was the biggest change, API has been very stable since then (that’s the nature of a preview release of course…)

  20. Ed Spencer says

    @Andrew the last several releases have had great stability. We’re tracking a handful of issues we’d like to correct before we claim GA but we’re pretty close

  21. Anthony Hoang says

    I was working on Sencha Touch 2pr3 and had a working app. I replaced my sencha-touch-all.js file with the one from Sencha Touch 2 Beta3 and immediately had some errors and now my app is broken. Is there a migration guide out there for developers who want to migrate from S.T.2pr3 to S.T.2b3?

Leave a Reply

Your email address will not be published. Required fields are marked *