Welcome to my blog, if there’s something I didn’t cover feel free to leave me a comment below and I will respond as soon as humanly possible. The topic of today’s article is an in-depth review of Sencha Touch framework.

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.

Link Examples


This is Part 6 in a multipart series called: “Best HTML5 Mobile App Frameworks”
Note: I have no intention of stopping writing after I review Sencha Touch. If you want me to review a framework, you like or know about just write me a comment below.

What Is Sencha Touch?

Sencha Touch is the original bad-ass mobile framework. It is a user interface (UI) JavaScript library or framework, specifically built for the Mobile Web. It can be used by web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices (Android, iOS, Windows, Tizen and BlackBerry devices). It is fully based on web standards such as HTML5, CSS3, and OOP JavaScript.
It is also one of the oldest mobile frameworks, if not the oldest one (it can be if you take into an account that it was build on the jQTouch foundation). Where, at that time, another mobile frameworks usually went with jQuery (at that time AngularJS didn’t exist and BackboneJS was still under development), Sencha Touch went the other way using ExtJs as a JavaScript foundation and jQTouch as UI framework (with the help of RaphaëlJS).
Sencha Touch includes a wide range of graphical user interface GUI-based controls (or widgets, more than 50 of them) for use within mobile web applications. All of those components are optimized for touch input. The components are: buttons with device specific themes and effects; form elements such as text fields for email, date picker, and address; sliders, selectors, and combo-boxes; a list component with momentum scrolling and an index bar; a minimal icon set; toolbars and menus; movable tabs; bottom toolbars; and a map component with support for multi-touch gestures such as pinch and zoom.
All the components can be themed according to the target device (it is done utilizing SASS). This is one of the greatest Sencha Touch features, for example, hybrid iOS app will look and feel like an iOS app, same goes for other platforms.
Sencha Touch architecture follows a custom MVC pattern. While there are many MVC architectures (classic MVC, modern MVVM), most of which are slightly different from one another, Sencha Touch MVC follows these rules: Models, Stores, Views, and Controllers. MVC isn’t requirement for Sencha Touch development, but when used, it brings additional benefits like code reuse or a predictable coding structure and pattern.
To leverage development complexity, Sencha Touch comes with Sencha Architect. It offers a fastest way to build Sencha Touch HTML5 apps for the web and mobile devices (this is not an overstatement). Another great thing about this tool is that it always generates code using the MVC pattern.

What Sencha Touch is not?

If you don’t prefer object oriented development (OOP), then Sencha Touch is not for you. Thanks to this feature it has a higher learning curve than other mobile frameworks.
Sencha Touch is not free, an even basic package is expensive, not to mention it’s unusable without Sencha Architect (at least for inexperienced developers) which makes it even more expensive. Don’t get me wrong, the core Sencha Touch framework (used for mobile apps development), is free as long you are creating proprietary applications and you do not want to distribute and share the source code of your application with your users. Sencha Touch bundle costs $3,855.00 (up to 5 developers). From what I can see, currently you can’t buy a single license, which is insane. For example, Kendo UI offers you more, and you can still buy a single license. If you want to find more about this problem take a look here.
It is not good for hardcore graphics and animations. If you developing a graphics heavy game I would rather choose native or Famo.us (AngularJS based framework).

Main features

  • Commerical product (free version is also available)
  • Adaptive Layouts (responsive design is only partially supported)
  • Built around ExtJS (MVC support)
  • Built-in Theme Builder support
  • Supports native app packaging system like PhoneGap or Cordova
  • Usable for mobile and classic web development
  • 50+ widgets
  • Very fast customer support

Code example



<!DOCTYPE html>

    <link rel="stylesheet" href="http://cdn.sencha.io/touch/sencha-touch-2.1.0/resources/css/sencha-touch.css">
    <link rel="stylesheet" href="style.css">    
    <script src="http://cdn.sencha.io/touch/sencha-touch-2.1.0/sencha-touch-all.js"></script>
    <script src="script.js"></script>    





  name: 'Sencha',

  launch: function() {
    Ext.create("Ext.tab.Panel", {
      fullscreen: true,
      tabBarPosition: 'bottom',

      items: [{
        title: 'Home',
        iconCls: 'home',
        cls: 'home',

        html: [
          '<img src="http://staging.sencha.com/img/sencha.png" />',
          '<h1>Sencha Touch Demo</h1>'

      }, {
        xtype: 'nestedlist',
        title: 'Other Tab',
        iconCls: 'star',
        displayField: 'title',


        detailCard: {
          xtype: 'panel',
          scrollable: true,
          styleHtmlContent: true

        listeners: {
          itemtap: function(nestedList, list, index, element, post) {


Working Plunker example can be found here:
Working embedded example:
Continue Reading