Sencha Touch 2.2 Features

Sencha Touch 2.2 adds support for new tools and devices, and lets you measure performance with these features:


  • Sencha Cmd 3.1 and Sencha Architect 2.2 support
  • Internet Explorer 10 support
  • Microsoft Surface Pro and Surface RT, Windows Phone, and BlackBerry 10 support
  • Icon font-face support
  • Platform detection in app.json for changing themes
  • Platform config option to change settings by platform or theme
  • Performance improvements
  • Measure performance with the showfps URL option
  • Experimental support for FireFox 21, Opera Mobile, Chrome pixel mouse and touch inputs
  • User interface changes




  • 支持Architect2.2和CMD3.1
  • 支持IE10
  • 支持微软平板电脑和wp bb10
  • 支持图标的CSS3 font-face
  • 根据platform，比如ie，firefox等等调整整体css模板或样式
  • 提升效率： 这块蛮多的，但是得具体感受下，从图表上看到的感觉不靠谱）
  • 增加了showfps 测试运行效率的工具
  • 支持ff om chrome的像素鼠标和触摸输入
  • 改变ui，其实就是支持css3 的font-face

In addition, extensive bug fixes were made - see the Release Notes.


Sencha Cmd 3.1 and Sencha Architect 2.2 Support

Sencha Touch 2.2 requires the use of the free Sencha Cmd 3.1 or later to package apps. Sencha Architect 2.2 also requires use of Sencha Cmd 3.1 or later. Sencha Cmd 3.1 removes the need to have Sass and Compass installed on your computer since it uses its own bundled version of Sass and Compass. Sencha Cmd 3.1 also provides Ant and the new "sencha app package" command for packaging apps for mobile devices.


Internet Explorer 10 Support

Internet Explorer 10 has its own theme or can use the Sencha Touch theme. In the current release, Back and Forward buttons with an arrow on the left or right side of the button render without the arrow. Buttons with arrows are only supported on WebKit browsers.


Surface and BlackBerry 10 Support

Sencha Touch features now work on the Microsoft Surface Pro, Surface RT, Windows Phone, and BlackBerry 10 devices. Theming support is provided for the BlackBerry 10. If you are developing an app for Windows Phone or BlackBerry, you can use ​​Apache Cordova​​ to package your app.


CSS3 font-face Support

Sencha Touch no longer uses WebKit masks for icons and now uses CSS3 font-face. This change significantly improves performance and scaling. This change requires that you convert your icons into a font file and specify the file's URL in your application's CSS file. For more information on font-face, seefont-face rule​. The font file can be True Type (TTF), Scaled Vector Graphics (SVG), or Embedded Open Type (EOT). The web provides many tools for converting a PNG graphics file to a font, for example, Pictos Server​ or Pictonic.

You can view the Sencha Touch icon font library. Sencha lets you use this font in your apps free of charge and without a license. The font is provided in the Touch 2.2 and later software download distribution as an EOT, SVG, and TTF file. For Android and iOS apps, Touch automatically adds the font library to an app you package using Sencha Cmd 3.1 or later.


Platform Detection for Themes

Sencha Touch uses a whitelist to detect platforms for themes the same as ExtJS. The Touch theme feature is also implemented similar to ExtJS except that Touch has three schemes, plus the base class, and you can add custom themes. Touch themes are .scss files generated through use of Sass.Sencha Cmd 3.1 installs Ruby and Sass for you.

Touch also differs from ExtJS by its DOM structure that enables Touch to normalize browser access for its components.

Touch detects the Chrome, Safari, and iOS platforms, and loads the Touch theme as the default. If you don't specify a theme, Touch uses its default theme. Touch provides three themes: Sencha Touch default, IE10, and BlackBerry 10. These themes extend the Touch base class, which is in the base.scss file in the software distribution.

To create a theme, install ​​Sencha Cmd 3.1​​ or later on your computer. In Touch, creating a theme means creating a .scss file using Sass. You can also extend any of the Touch themes or the base class.

For more information on creating and using themes, see ​​Theming​​ in the ExtJS documentation.

Note As you add settings to your theme, test their performance using the new showfps feature, which lets you view how theme settings affect animation performance.

The Touch software distribution provides SCSS files for the themes that you can use or change as required. Each component has its own CSS file, for example button.css is for buttons and a button.js file that accompanies use of the component. Update a Ruby Sass file which generates the CSS file.

Important To use themes, in Touch 2.2, you must include the base class base.css file in your app in addition to your theme's CSS file.


Platform Config Option

This feature lets you modify configuration options depending on what platform you're using or what theme you're using. An example of how to use this is for scaling graphics between operating system types. For example, for a Mac you may want to use one size graphic and on Windows another size.


Performance Improvements

The following improvements in Sencha Touch 2.2 improve performance:


  • Scrolling indicators were refactored and cleaned up to use the fastest indicators for each platform
  • Translatable class logic improved and optimized for each platform
  • ScrollPosition has been updated to use a static large size instead of having to dynamically measure, which improves performance for Android 2 and Internet Explorer - this is created as a 1 million-pixel <div> block to ensure any scroll component fits
  • Unified animation queue that improves performance - use the ​​showfps option​​ feature to measure the performance
  • Updated the List component to improve performance
  • Memory leak issues for charts and datastore were fixed
  • Chart type renderers APIs were unified and cleaned up so that all follow the same pattern. Anyone who created customizations for the chart APIs may need to rework their code accordingly
  • Refactored the pullToRefresh plugin for performance and consistency


Measure Animation Performance With the showfps URL Option

For debug applications, add the ?showfps option to the URL to display animation performance information about an application where you enable debugging. The display lists the performance information for the average number of animation transitions, the current transition, and the minimum and maximum values for the last 1000 transitions. This feature is very useful for performance testing and creating benchmark data.

Note The showfps feature only works on browsers that support requestAnimationFrame. If the browser only uses a fallback, a message appears indicating that the results may not be accurate. In this case, the information measures how fast JavaScript runs the app, but not how fast the animation draws on the screen. The native Android browsers do not support requestAnimationFrame, but Chrome for Android does. In the case of the native Android browsers, the animation sampling is based on 60 frames per second; however, this does not necessarily mean the browser is painting the animation at that rate. Browsers that do support requestAnimationFrame means that the showfps feature accurately measures each animation display.


Experimental Support

Sencha Touch provides support for FireFox 21, which is currently in Alpha. The Mozilla implementation is experimental and relies on the FireFox 21 nightly build of its flexible box implementation. Sencha is working with the Mozilla team on known layout issues. Most examples run, including the Kitchen Sink, but your mileage may vary. Do not use this for production applications.


User Interface Changes

The IconMask option in the button components was removed. In Touch 2.2, icons no longer use masks, they now use the CSS3 font-face feature.