First Steps in Sencha Touch

Share this article

Want to develop mobile applications across all platforms? Want to develop HTML5 mobile applications? Don’t know where to start? This article aims to help you begin your journey with the Sencha Touch HTML5 framework.

What is Sencha Touch?

Sencha Touch is an HTML5 framework for developing mobile applications. It allows you to develop mobile applications that would have the same look and feel as a native application. Sencha Touch supports Android, iOS, Windows Phone, Microsoft Surface Pro and RT, and Blackberry devices.


  • UI components (Panels, Tab bar, Navigation view, buttons, pickers)
  • Components can be themed depending on the target devices
  • Access device capabilities like camera, accelerometer etc, with the help of PhoneGap frameworks.

How to Start

Download the free Sencha Touch SDK and Sencha Cmd from the Sencha website. Note that Sencha Cmd will also install Ant, Ruby, Sass, and Compass, all or some of which will be useful for building applications. You will also need a web server running locally on your computer, for example XAMPP. The Sencha website advises “If you are running the IIS web server on Windows, manually add  application/x-json as a MIME Type for Sencha Touch to work properly. For information on adding this MIME type see the following link:“.


Extract the SDK zip file to your projects directory. This folder should be accessible to your HTTP server, so you can navigate to http://localhost/sencha-touch-2.n in your browser and see the Sencha Touch documentation. Run the Sencha Cmd installer. The installer adds the Sencha command line tool to your path, enabling you to generate a fresh application template, among other things. Confirm that Sencha Cmd is correctly installed by changing to the Sencha Touch directory, and entering a sencha command, for example:
$ cd ~/webroot/sencha-touch-2.n/
$ sencha
Sencha Cmd v3.1.n
Note When using the sencha command, you must be inside either the downloaded SDK directory or a generated Touch app. For further details see the Sencha Cmd documentation. Your development and testing environment should now be ready.

Sencha Touch Project

  1. Index.html – page where your application will be hosted from.
  2. App Directory – the application in general is a collection of Models,Views, Controllers, Stores and Profiles
    • Model: represents the type of data that should be used/stored in the application
    • View: displays data to the user with the help of inbuilt Sencha UI components/custom components
    • Controller: handles UI Interactions and the interaction between the model and the view.
    • Store: responsible for loading data into the application
    • Profile: helps in customizing the UI for various phone and tablets.
  3. Resources Directory – contains images, css and other media assets
  4. App.js
    • Global settings of the application
    • Contains the app name, references to all the models, views, controllers, profiles and stores
    • Contains the app launch function that is called after the models, views, controllers, profiles and stores are loaded. App launch function is the starting point of the application wherein the first view gets instantiated and loaded.
    • Touch directory – Contains the Sencha Touch framework files.

Try a Sample

Let us create a simple navigation view with a list in it.








Let’s break that down. The Ext.define function helps us to define a class named Home in the namespace MyFirstApp/view. All view components are placed within this namespace as per Sencha Touch MVC standards. Extend keyword specifies that Home class is the subclass of Ext.NavigationView. So, the Home class inherits the base configuration and implementation of Ext.NavigationView class. xtype keyword is used to instantiate the class. Config keyword helps us to initialize the variables/components used in that particular class. In this example we should initialize the navigation view with a list. The content of Items in the Home view is currently blank. Let us create a list view and place its reference inside the items field of the Home view. First of all, present this home view in the app launch function


launch: function() {

    // Initialize the main view


Now, Let us create a simple model class for the data in the list.







Let us create a data store and map it to the above model.















We have initialized the store with the list data as well. Proxy is used to load the model with the data. The Local Storage object is an HTML5 feature for storing data locally in the browser. There are other proxies as well. Ajax – Used for request within a particular domain Local Database – Allows creating client side database. We can omit the proxy for this sample as we will not be using it.







        title:'My List',










In the code above, MyList view is created in the namespace MyFirstApp.view and it inherits the properties of Ext.Panel. When references to other classes are required in a particular class, those classes should be declared under the requires field. Sencha Touch ensures that the required classes are loaded. MyList view is initialized with the title as My List, layout as fit and contents as the List component. List component is mapped to the data store. ItemTpl represents the data template as to how the list should be displayed to the user. Now we will add the list to our home view






The above example can be tested in Chrome browser by simulating various mobile resolutions. Right click on the browser and select ‘Inspect Element’. Select Settings icon in the right corner of the Inspect Element Window. Select any user agent and the resolution. settings


The aim of this article has been to help you take your first steps in Sencha Touch development. So, what are you waiting for? Go ahead and improvise, adapt the code, bring in your ideas, then develop and publish your own HTML5 mobile applications.

Frequently Asked Questions about Sencha Touch

What is Sencha Touch and how does it work?

Sencha Touch is a high-performance HTML5 mobile application framework, which provides a development environment for the Sencha HTML5 platform. It is specifically designed to create applications for mobile devices, using web standards such as HTML5, CSS3, and JavaScript. Sencha Touch allows developers to create apps that have the look and feel of native applications, but are built using web technologies. This means that they can be run on multiple platforms without the need for platform-specific coding.

How can I get started with Sencha Touch?

To get started with Sencha Touch, you first need to download and install the Sencha Touch SDK. Once installed, you can start creating your first application using the Sencha Cmd tool, which is a command-line interface for managing your Sencha Touch projects. You can also use the Sencha Architect, a visual app builder for creating Sencha Touch applications.

What are the key features of Sencha Touch?

Sencha Touch comes with a rich set of UI components, including lists, carousels, forms, and toolbars, which can be used to create visually appealing mobile applications. It also supports touch events, animations, and theming, allowing you to create interactive and engaging user experiences. Additionally, Sencha Touch provides a data package that allows you to manage and interact with data in your application.

How does Sencha Touch compare to other mobile application frameworks?

Compared to other mobile application frameworks, Sencha Touch stands out for its focus on performance and its comprehensive set of UI components. It also provides a robust data package, which makes it easier to manage and interact with data in your application. However, it does require a good understanding of JavaScript and MVC architecture, which may make it more challenging for beginners.

Can I use Sencha Touch for building cross-platform applications?

Yes, Sencha Touch is designed for building cross-platform applications. It allows you to create applications using web technologies that can be run on multiple platforms, including iOS, Android, and Blackberry. This means that you can write your code once and run it on multiple devices, without the need for platform-specific coding.

What are the system requirements for Sencha Touch?

To use Sencha Touch, you need a system running Windows, Mac OS X, or Linux. You also need to have Node.js installed, as well as a web server such as Apache or Nginx. Additionally, you need a modern web browser for testing your applications.

How can I learn more about Sencha Touch?

There are many resources available for learning more about Sencha Touch. The official Sencha website provides a wealth of information, including documentation, tutorials, and a community forum where you can ask questions and share your knowledge. There are also many online tutorials and courses available on websites like SitePoint and TutorialsPoint.

Is Sencha Touch free to use?

Sencha Touch is available under a commercial license, which means that it is not free to use for commercial purposes. However, there is a free version available for non-commercial use, such as personal projects or open source development.

What kind of applications can I build with Sencha Touch?

With Sencha Touch, you can build a wide range of mobile applications, from simple single-page apps to complex, data-intensive applications. It is particularly well-suited for creating business applications, thanks to its robust data package and comprehensive set of UI components.

How can I get help if I encounter problems while using Sencha Touch?

If you encounter problems while using Sencha Touch, there are several places where you can get help. The official Sencha website has a community forum where you can ask questions and get answers from other Sencha Touch users. There are also many online tutorials and guides available that can help you troubleshoot common issues.

Kanya SrinisavanKanya Srinisavan
View Author
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week