Sencha 2.2 details

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 effecect 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

• Support for t2.2 and 3.1
• Supports ie10
• Support for Microsoft tablets and WP bb10
• Supports CSS 3 font-face for icons
• Adjust the overall CSS template or style according to platform, such as IE and Firefox.
• Efficiency Improvement: There are a lot of such images, but you may feel unreliable from the charts)
• Added the showfps test efficiency tool.
• Supports pixel mouse and touch input of FF om chrome
• Changing the UI is actually supporting CSS 3 font-face

In addition, extensive bug fixes were made-see the release notes.

Sencha cmd 3.1 and sencha effecect 2.2 Support

Sencha touch 2.2 requires the use of the free sencha cmd 3.1 or later to package apps. sencha effecect 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 conversion 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 alias t 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 installruby 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
• Uniied 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 mizmizations 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? 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.