Sencha Touch - BlackBerry support

Sencha Touch 2.x provides theme and functionalities specific to BlackBerry 10.

Sencha Touch not only supports Blackberry, it provides BlackBerry 10 icons which ensures the devices have BlackBerry look and feel.

Adding BlackBerry theme to app.json

The following example shows how to add BlackBerry theme to app.json.

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

Adding BlackBerry icons

Sencha Touch provides more than 50 icons for BlackBerry theme, so the application gives a better look and feel. You can find the icons in the Sencha Touch /resources/themes/images/bb10/icons directory after you download and unzip the Sencha Touch software installation.

Compile these icons into your app.scss file before using them in your application. The SCSS file resides in the resources/sass directory in the Sencha Touch installation directory. Add the images that you want to use to the app.scss file, and use Compass to compile the file and generate the app.css file. Compass comes as a bundle with Sencha CMD.

Now for using the icon, you can directly use the icon with iconCls property.

iconCls: 'overflow_tab'

Sencha Touch has a new action bar, menus specific to BlackBerry.

Adding BlackBerry Action Menus to Action Bar

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <link href="https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" />
      <script type="text/javascript" src="https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type="text/javascript">
         Ext.application({
            name: 'Sencha',

            launch: function() {
               // Tab menu button
               var tabMenuButton = Ext.create('Ext.ux.TabMenuButton', {
                  text: 'All',
                  docked: 'left',
                  iconCls: 'view_grid',
                  menuItems: [
                     {
                        text: 'All',
                        iconCls: 'view_grid'
                     }, {
                        text: 'Favorites',
                        iconCls: 'done'
                     }, {
                        text: 'Messenger',
                        iconCls: 'bbm'
                     }
                  ]
               });
               // Add it to the action bar
               Ext.Viewport.add({
                  layout: 'card',
                  items: [
                     {
                        xtype: 'toolbar',
                        docked: 'bottom',
                        items: [tabMenuButton]
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

It will produce the following result −

sencha_touch_core_concepts.htm