Sencha Inc. | HTML5 Apps

Blog

Hello Sencha Touch 2.2

April 15, 2013 | Aditya Bansod

Sencha Touch 2.2

We’re excited to announce the general availability of Sencha Touch 2.2, the latest version of our JavaScript framework for building multi-device, touch-based applications. We’ve been hard at work on the latest version of Touch, adding in a whole host of new features as well as fixing issues and bugs (thank you to all our beta testers!).

Our focus for Sencha Touch 2.2 was to expand the footprint of device support to give you, our community, the broadest selection of devices to run your apps. In this release, we’ve enhanced our support for BlackBerry 10 devices and added support for Internet Explorer 10 for Windows 8 and Windows Phone 8. We’ve also made some big changes to improve performance in lists, themes, new debugging capabilities, added the new AnimationQueue feature, and more. This is the best Sencha Touch yet.

Learn the latest about Sencha Touch and HTML5/JavaScript for three intensive days with 60+ sessions, 3+ parties and more at SenchaCon 2013. Register today!

Updated BlackBerry 10 support

Sencha Touch already runs great on the recently released BlackBerry Z10 and also runs great on the forthcoming BlackBerry Q10. For Touch 2.2, we partnered closely with the folks at BlackBerry to take it even a notch higher, and now your Touch apps have everything they need to run lightning fast on BlackBerry 10 devices. You’ll find that the right markup, the right styling, and the right parameters for things like touch handling are all in place.

New Internet Explorer 10 Support

Sencha Touch 2.2 is the first version that works on Microsoft’s Internet Explorer 10 browser — goodbye WebKit dependencies! For the past few months, we worked with the Microsoft Open Tech team to remove all the WebKit specific code in Sencha Touch (or only use it when we’re on a WebKit browser). Under the hood, we’re using standard CSS3 flexible box layouts and HTML5 DOM selectors to get all of our layouts and rendering working beautifully wherever IE 10 runs (such as the Surface, Windows Phone 8, and Windows 8 devices).

We also built a new Windows 8 style modern theme that developers can use to build Microsoft-style looking applications just by switching to the new theme. It features the high padding, no-gradient, sans serif style that’s perfect for building Windows 8 and Windows Phone 8 applications. It’s pretty eye-catching, definitely check it out.

New Theming System

To make all the new platforms and new themes easy to support, Sencha Touch 2.2 features a revamped theming system. Switching your applications theme is as simple as changing the css property in your app.json file and the microloader and framework handle the rest. Our Kitchen Sink example now uses this system to display different themes based on which device it is being used on. You can see its app.json configuration here:

 
"css": [
    {        {
        "path": "resources/css/sencha-touch.css",
        "platform": ["chrome", "safari", "ios", "android", "firefox"],
        "theme": "Default",
        "update": "delta"
    },
    {
        "path": "resources/css/wp.css",
        "platform": ["ie10"],
        "theme": "Windows",
        "update": "delta"
    },
    {
        "path": "resources/css/bb10.css",
        "platform": ["blackberry"],
        "theme": "Blackberry",
        "update": "delta"
    }
],
 

We encourage you to try out the various built-in themes by using the “Theme” option in our Kitchen Sink demo app. Also check out our theming guide.

In Touch 2.2, we’ve changed the icons to use font-face — which are supported across all modern browsers, are more compact, and scale beautifully. Just like Sencha Touch 1 and 2.1, we conveniently map icon names to actual icons so you can use them within your application. For example:

 
{
    xtype: 'button',
    iconCls: 'home',
    title: 'Home'
}
 

For a full list of available iconCls's available, please refer to the Ext.Button class documentation.

Performance Improvements

In December, we demonstrated the power and speed of HTML5 with our Fastbook proof of concept application. We’re excited to announce that many of the techniques we pioneered in Fastbook are now built into Sencha Touch 2.2. Specifically,

  • AnimationQueue is a centralized Event and Animation queue. When the browser has requestAnimationFrame, AnimationQueue uses that HTML5 API, and when it’s not, uses more vanilla JavaScript timers. This new system helps ensure that we handle animations and other events only in between frames, so everything runs smoothly.
  • List DOM has been dramatically streamlined. Almost all Touch apps use a list and with the lighter DOM, scrolling will remain fast even as your list and templates get more complicated.
  • The showfps debugging option lets developers see how fast Touch is rendering and will help you see when your application’s design is outpacing the performance of the device.

Sencha Architect 2.2 Support

Today we also released an update to Sencha Architect 2.2 that includes support for Sencha Touch 2.2, thus instantly allowing our Architect users to become Touch 2.2 developers. Architect can help build your next great Touch app, and if you have an existing Architect+Touch project, you can easily upgrade it to a Sencha Touch 2.2 project. Architect makes it easy to switch between the new built-in Touch themes.

Try It Out

Go ahead and take Sencha Touch 2.2 for a spin: try the Sencha Touch Bundle, which includes Sencha Touch, Sencha Touch Charts, Sencha Eclipse Plugin, and Sencha Architect; or download the free standalone Sencha Touch SDK. It’s available with a 30-day trial, so feel free to download it and give it a go: it gives you everything you need if you are serious about building great touch apps.

There are 11 responses. Add yours.

Jay Garcia

2 years ago

This update was heavily anticipated by the community and we’re super excited to see it live.  Thank you all for the hard work on this.  The custom theming changes are going to make life much easier for us.

Mats

2 years ago

Sweet, downloading right now! Btw, download page says “2.2.1” (incorrect?)

/Mats

Jay Garcia

2 years ago

Mats, yeah dude, it’s 2.2.1.  Do a Ext.getVersion().version

Aditya Bansod Sencha Employee

2 years ago

Hi all—due to a build snafu, a build mislabeled 2.2.1 was posted in the standalone Touch download. In Complete and Touch Bundle, the correct Touch 2.2.0 was packaged. We’ve fixed this and the correct (and Q&A’ed) Touch 2.2.0 is now available for download.

mcbl

2 years ago

Why is nothing about 2.2 in support? We’ve the bundle and need 2.2 commercial.
https://support.sencha.com

Kazuhiro Kotsutsumi

2 years ago

I translated it into Japanese.

http://www.xenophy.com/sencha-blog/6878

Provision: Japan Sencha User Group
http://www.meetup.com/Japan-Sencha-User-Group/about/

David Jensen

2 years ago

It is not clear whether or not there is a free commercial version of Sencha Touch 2.2. Please clarify.

dams

2 years ago

Very nice upgrade for android devices, (just nexus 4 don’t appear to be sencha ready).
Thanks for the jobs

Aditya Bansod

2 years ago

@David—yes, you can download the free commercial version. It has been updated to 2.2.0.

Brad

2 years ago

” — goodbye WebKit dependencies! ”  Does this mean support for Firefox desktop as well?

patrick kanye

2 years ago

you guys never stop to amuse me…....i really pitty the competition b’se u gat it all….LOL

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.