Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Introducing Sencha Touch 2.1 on BlackBerry10

by BlackBerry Development Advisor on ‎11-05-2012 04:20 PM - edited on ‎11-05-2012 04:20 PM by BlackBerry Development Advisor (5,294 Views)

What is Sencha Touch?


Sencha™ Touch is an impressive web framework based entirely on HTML5, CSS and JavaScript® that is designed to bring an incredibly powerful set of components to help create web apps that look and feel like native applications. The Sencha Touch 2.1 not only brings support for BlackBerry® 10 devices, but it also supports the BlackBerry® Playbook™ tablet.


Sencha is an industry leader in tools to help developers build universal applications based on web standards. Their products include Sencha Touch, as well as the visual app builder Sencha Architect, and their desktop JavaScript framework Ext JS. Check out Sencha’s website for detailed company information and to learn more about their various products.


What is new in Sencha Touch 2.1?


Sencha Touch 2.1 includes key upgrades such as significant performance improvements, updated charting support, a new infinite list component, and enhanced native support through the Sencha Mobile Packager the most relevant upgrade to BlackBerry platform is the performance improvements.  In Sencha Touch 2.0 some of our BlackBerry developers could at times have noticed issues with complex nested layouts. Sencha Touch 2.1 addresses the issues found for these application developers and provides improved performance by providing more layout information to the browser.   This improvement did not change any of the APIs, but were done with changes to the DOM structure and additional CSS rules to help the browser flow complex layouts better.  Developers of applications with the custom CSS should review their selectors with this update.


BlackBerry & Sencha Touch


Sencha Touch 2.1 will support BlackBerry 10 devices as well the BlackBerry PlayBook.  With the brand new BlackBerry 10 OS, and the BlackBerry PlayBook OS 2.0, Sencha features will work with ease on these platforms. Along with the Sencha Touch 2.1 SDK, a beta BlackBerry 10 theme is also available to provide the BlackBerry 10 look and feel to your application and to present customized user interface on BlackBerry 10. To learn more about the BlackBerry 10 theme, download the BlackBerry 10 theme package and refer to the documentation for guidance.


Getting started with Sencha Touch


To get started, developers should download the framework, and then check out the Sencha Touch Learning Center, where they will find code samples, videos and tutorials. To get an idea of what is possible using the framework, there are a variety of demo applications showcasing the breadth and power of the platform.


Features supported by Sencha


These are some of the features which are supported by the Sencha Touch 2.1 framework.  To see the complete list of supported features, refer the following link, http://www.sencha.com/products/touch/features.


AJAX - Sencha Touch provides full AJAX support, including CORS and JSON-P.  CORS stands for Cross-origin resource sharing and JSON-P provides a method to request data from a server in a different domain.


DOM manipulation - Full DOM manipulation support available which means you can manipulate your HTML and XML using the DOM related methods provided by Sencha.


Feature Detection - Automatically detects the presence of features like geolocation, canvas and orientation support.


Geolocation - Provides a simple wrapper around geolocation on devices that support it.


Icons - 300 icons included for use by developers.


Touch events - Provides a full range of touch events and gestures like tap, swipe and pinch.


UI components supported by Sencha Touch


When you are designing the UI, you can take advantage of these components which are supported by Sencha Touch.



Most apps that require user input will make use of forms. Forms in Sencha Touch are built on top of HTML5 forms, with additional options for validating and submitting data, plus an easy way to lay fields out in a pleasing visual style.


Data View

Data View makes it easy to create lots of components dynamically. It's great for rendering lots of data from your server backend or any other data source.



Carousels, like tabs, are a great way to allow the user to swipe through multiple full-screen pages.



Sencha Touch provides a list component that is ideal for presenting an index-style list of items.


Tab Panel

Tab Panels are a great way to allow the user to switch between several pages that are all full screen.


Nested List

Nested List is a component in Sencha Touch that provides a set of lists the user can tap through to navigate between nested sets of data with a clean and easy to use interface.


Navigation View

Navigation View is a new component in Sencha Touch 2. At its base, it is a simple container with a card layout and a docked toolbar; however Sencha built on top of that a easy way to push (add) and pop (remove) views in stack-like fashion. When you push a view, it will add that view into the stack and animate the new title into the toolbar. It will also animate a back button into the toolbar so you can provide your users with an easy flow to move between pages in your app.


Why Sencha?


While there are few JavaScript frameworks to ease web development for mobile devices and one question that you may ask is, “Why Sencha”? These are the few areas that Sencha stands out from other JavaScript framework providers.


Data Management


Sencha has done an excellent job with data management. The automatic translation from JSON to Model objects with typed properties is mighty nice. Thanks to the division of responsibilities, where you can easily swap in different types of data sources or destinations, this solution is clearly better than the typical “ActiveRecord” implementation you see in many other frameworks. With the option to use JSON, JSONP, AMF and SOAP out of the box, let productivity ensue.


UI Framework


Toolbars, Panels, Buttons, Icons, Cards, Carousel, Tabs… Oh My! There's no other framework for JavaScript that provides this much guidance, or components with this level of sophistication and performance optimization.


Offline Capabilities


Take your web application data offline in minutes with a simple API. SessionStorage and LocalStorage are easy Proxy types provided ‘right out of the box’ that can be used to toggle your web application into an offline state.




Sencha’s frameworks play well with Jasmine, a popular open-source framework for testing JavaScript code.  Sencha uses Jasmine internally to test Ext JS and Sencha Touch, and provides a tutorial for how to use it to test your own applications.


Documentation, Training and Support


Sencha offers a rich set of online API Documentation as well as professional training classes. From personal experience, they are quite helpful and enjoyable. More comforting than perhaps any components or feature is the fact that there is a proven successful company behind the products and frameworks offered by Sencha.


Sencha Project Structure


Below is the directory structure for a Sencha Touch 2 project, which is very similar to our BlackBerry® WebWorks™ project structure as well.


Here's a description of each file and directory:

  • app - directory containing the Models, Views, Controllers and Stores for your app.
  • app.js - the main JavaScript entry point for your app.
  • app.json - your app configuration file - used by the Builder to create a minified version of your app.
  • index.html - The HTML file for your app.
  • resources - directory containing the CSS and Images for your app
  • sdk - A copy of the Sencha Touch SDK. You shouldn't need to change the contents of this folder.


Building the Sencha project with BlackBerry WebWorks Packager


After you created the project with Sencha Touch framework, you will have a project structure which is outlined in the previous section.  Now, it is easy to convert this in to a bar file, which you can deploy to BB 10 and BB Playbook devices.  Let’s see how you can build this for BlackBerry.


Creating a configuration document


The BlackBerry WebWorks configuration document is an .xml file that contains the elements to define the BlackBerry WebWorks application namespace, the name of the application, application permissions, the start page, and the icons to use for the application. It also contains the elements to define general information such as the author and description. The configuration document contains the widget element at its root. The widget element provides a container for all other elements.


The valid file name for a configuration document for a BlackBerry WebWorks application is config.xml, and it is case insensitive. Within the application archive, the configuration document must use this file name. The config.xml file must exist in the root folder of the application archive.


To see what a configuration document looks like, see Sample configuration documents.

For a list of elements that you can use in a configuration document, see Elements.


Note: In the config.xml, you need to ensure that the following elements are set correctly.


                           <icon src="icons/icon-150.png"/>

                           <content src="index.html"/>


Packaging your app with the BlackBerry WebWorks SDK


Now that you have the project with Sencha Touch framework and you have created the BlackBerry WebWorks configuration document, you are ready to package your application for the BlackBerry 10 platform.  For detailed instructions on how to package your application, refer to the following link.



Deploying your application to a BlackBerry 10 device


Now that you have packaged your application with the BlackBerry WebWorks SDK and you have produced the .bar file, you are ready to deploy your application on o a BlackBerry 10 device.  Here is how you do it. 






A complete guideline for Sencha Touch



Getting Started with Sencha



Performance Optimization Tips