Build Mobile Apps with Sencha Touch
Sencha Touch was the first HTML5 mobile JavaScript framework for web applications that feel native on Android, BlackBerry, and iOS. Our extensive tutorials, screencasts and resources are a great way to learn the framework. Here are a few good starting points:
The Sencha Touch Kitchen Sink Walkthrough
Sencha Touch Quick Start
A Hello World app with Sencha Touch
An Introduction To Layouts
| Title | Version | Date Added | Difficulty | |
|---|---|---|---|---|
|
XTemplates; part II This two-part series describes how to use XTemplates, a powerful templating system in Sencha Touch (and Ext JS) that allows developers to easily format views around dynamic data. | 1.x | Oct 28, 2010 | Medium |
|
XTemplates; part I This two-part series describes how to use XTemplates, a powerful templating system in Sencha Touch (and Ext JS) that allows developers to easily format views around dynamic data. | 1.x | Oct 28, 2010 | Medium |
|
Working with Forms In this screencast, we build a simple application that lets us manage users. We use the model, view, controller (MVC) pattern, learning how to capture the data entered into a form to create new records and update existing records. We’ll also learn how to use the model validations from Sencha Touch’s data package to report errors in the form. | 1.x | Jul 22, 2011 | Medium |
| Using Validations and Associations in Sencha Touch Sencha Touch already has a rich Model layer which makes it easy to deal with different types of data. As of version 0.96, Models became a lot richer with support for validating their data and associating them with other Models. These new capabilities make it easier to write client-side applications by reducing the amount of code you need to write. | 1.x | Oct 14, 2010 | Easy | |
|
Using the Data Package in Sencha Touch This tutorial shows how to quickly put together simple components backed by the data package. See how the Model/Store/Proxy ecosystem fits together and how to use Stores with data-aware components, just like in our Sencha Touch Twitter example. | 1.x | Aug 17, 2010 | Easy |
|
Using Components in Sencha Touch 2 A guide for using Sencha Touch visual classes, i.e. Components. | 2.x | Mar 6, 2012 | Easy |
|
Upgrading to Sencha Touch 2 PR2 With the early preview of Sencha Touch 2 available for download, you may want to start thinking about the future upgrade process required for your existing applications. Although the API has yet to fully stabilize, there are certain things you can be thinking about now, and in this article, James Pearce takes a simple existing example app - the CityBars guide - and explores what is required to make it compatible with the PR2 release. | 2.x | Nov 28, 2011 | Medium |
|
Upgrading from Sencha Touch 1.x to 2.x A guide for our existing Sencha Touch 1.x customers looking to upgrade to 2.0. | 2.x | Mar 6, 2012 | Easy |
|
Touch Drawing and Charting This document is intended to guide you through the overall design and implementation details of the Drawing and Charting packages, as used by Sencha Touch Charts (as well as Ext JS). The drawing and charting packages enable you to create cross browser and cross device graphics in a versatile way. | 1.x | Jul 25, 2011 | Easy |
|
Touch Charts Styling This guide describes the styling system used in Touch Charts, and provides an overview of how you can customize the look and feel of your charts to truly make them yours. | 1.x | Aug 3, 2011 | Medium |
|
Touch Charts Interactions This guide introduces the advanced interaction features in Sencha Touch Charts. By taking advantage of these features, you can create highly interactive charts that allow your users to visualize and easily navigate complex data sets. | 1.x | Jul 21, 2011 | Medium |
|
Theming Sencha Touch This screencast describes the basics of theming in Sencha Touch. This tutorial is perfect for beginners who want to get started customizing the interface of their Sencha Touch mobile app using CSS3 and Sass/SCSS. | 2.x | Feb 16, 2012 | Easy |
|
Theming Sencha Frameworks with Sass and Compass James Pearce takes you through setting up Sass and Compass to start theming Sencha Touch and Ext JS 4. | any version | Jul 16, 2011 | Easy |
|
Taking Sencha Touch Apps Offline Mobile and tablet users are now first-class citizens of the web, and with Sencha Touch, we can create beautiful web-based applications for them. That is, until they drive into a tunnel. Or get on a plane. Or stray too far from cellular coverage. In this article, we discuss tactics you can use to serve users, regardless of their connectivity. | 1.x | Apr 22, 2011 | Medium |
|
Tabs and Toolbars This screencast demonstrates how to use Sencha Touch to create a tabbed interface with icons, and how toolbars can be used to hold buttons, or a titlebar. | 1.x | Apr 11, 2011 | Medium |
| Sencha Touch Quick Start The quickest possible ways to get started with Sencha Touch development, on both Mac and Windows machines. Ideal for a rolling start at hackathons! | 1.x | Aug 6, 2011 | Easy | |
|
Sencha Touch 2: Tabs & Toolbars When it comes to building a user interface with Sencha Touch, the TabPanel and Toolbar are two components that you're going to find indispensable. In this video walkthrough, Drew Neil (@nelstrom) demonstrates how to create a tabbed interface with icons, and how toolbars can be used to hold buttons, or a titlebar. | 2.x | Mar 6, 2012 | Medium |
|
Sencha Touch 2: Native Packaging Demo Using the new Sencha Touch native packaging tool to produce HTML5 apps that access native APIs, gaining access to native capabilities like taking pictures, showing notifications and tracking device orientation. | 2.x | Mar 5, 2012 | Medium |
|
Sencha Touch 2 Class System In this introductory screencast, Jay Garcia walks you through the very basics of using the Sencha Touch 2 class loader system. | 2.x | Nov 3, 2011 | Easy |
| My First Sencha Touch Experience Well-known designer and developer, Joe McCann, recently spent a few days using Sencha Touch. In this article, he talks through his experiences of building his first application. | 1.x | Apr 23, 2011 | Easy | |
|
Meet the List component This screencast shows what the List component can do, including sorting and grouping records, and adding an index bar. It also shows how to reveal a detail panel for each listed record, using a navigation view to coordinate the list and detail cards. This demonstration uses Sencha Touch's MVC pattern. | 2.x | Feb 22, 2012 | Medium |
|
Learning Sencha Touch Charts Graphics Team Lead Jamie Avins goes over the basics of getting started with Sencha Touch Charts. Sencha Touch Charts is a data visualization package for Sencha Touch, allowing developers to build rich interactive charts and graphics on the mobile web. | 1.x | Aug 1, 2011 | Easy |
|
Layouts Walkthrough Brian Suda describes and demonstrates how Sencha Touch layouts work in this nine minute tutorial. | 1.x | Oct 8, 2010 | Easy |
|
Intro to the Nested List Component This screencast describes the basics of the NestedList component in Sencha Touch. | 1.x | Mar 2, 2011 | Medium |
|
Intro to the List Component This screencast describes the basics of the List component in Sencha Touch. | 1.x | Jan 27, 2011 | Easy |
|
Intro to Panels This screencast describes the basics of how panels work in Sencha Touch. This tutorial is perfect for beginners who want to understand how to create components and buttons inside their Sencha Touch mobile app. | 1.x | Oct 15, 2010 | Easy |
|
Intro to Listeners This screencast describes the basics of how listeners work in Sencha Touch. This tutorial is perfect for beginners who want to understand how to create custom behavior and functionality inside their Sencha Touch mobile app. | 1.x | Dec 2, 2010 | Medium |
|
Intro to Layouts in Sencha Touch 2 In Sencha Touch, the Component and Container form the basic building blocks for creating an interface. Each container can be assigned a Layout which handles the positioning of its inner items. The layouts work either by neatly arranging components to use the available space, or by showing just one component at a time and providing some way of changing the focus between them. In this tutorial, we'll see each different layout type in action and see how they can be combined in any manner you can think of. | 2.x | Mar 15, 2012 | Easy |
|
Intro to Layouts This screencast describes the basics of how layouts work in Sencha Touch. This tutorial is perfect for beginners who want to understand how to create components and buttons inside their Sencha Touch mobile app. | 1.x | Oct 15, 2010 | Easy |
| Idiomatic Layouts with Sencha Touch II In the second of this article's two-parts, we show how, with a single code-base, we can complete our app which uses the Sencha Touch 'application profiles' mechanism to deliver idiomatic user interfaces to both phone and tablet users. | 1.x | Aug 1, 2011 | Medium | |
| Idiomatic Layouts with Sencha Touch In the first article of this two-part series, we show how, with a single code-base, we can start to create an app which uses Sencha Touch’s 'application profiles' mechanism to deliver idiomatic user interfaces to both phone and tablet users. | 1.x | Aug 1, 2011 | Medium | |
|
How to use src.sencha.io Sencha.io Src is a cloud-based way to help you dynamically resize images for the ever increasing number of mobile screen sizes. It’s very easy to use, and in this guide, we run through the main API options for the service. | 1.x | Aug 4, 2011 | Easy |
|
How to Use Classes in Sencha Touch 2 Sencha Touch 2 uses the state of the art class system developed for Ext JS 4. This guide provides pointers on how to use this system. | 2.x | Mar 6, 2012 | Easy |
|
Hello World In this article, we will run through the absolute basics of building your first application, in the time-honored tradition of displaying the words 'Hello World'. | 1.x, 2.x | Nov 24, 2010 | Easy |
|
Enhancing iOS Sencha Touch apps with NimbleKit, pt II In the second part of our NimbleKit tutorial, we look at how we can create an web-based internet radio application, and hook our Sencha Touch app up to the iOS camera and email functionality. | 1.x | Aug 10, 2011 | Medium |
|
|
Enhancing iOS Sencha Touch apps with NimbleKit It's becoming increasingly popular to build web applications that can be packaged and distributed into app stores - and which can capitalize on API extensions to get access to native device functionality and so on. In this first half of this two-part tutorial, we discuss enhancing Sencha Touch with NimbleKit - a native shell option for doing just that. | 1.x | Aug 10, 2011 | Medium |
|
Create a Twitter App with Geolocation We demonstrate how to quickly create a Geolocation-powered Twitter mobile app with Sencha Touch in this tutorial video. | 1.x | Oct 8, 2010 | Medium |
|
An Introduction to the Kitchen Sink Michael Mullany runs through an early beta version of the Sencha Touch Kitchen Sink app, demonstrating many of the core capabilities of the framework. | 0.x | Jun 17, 2010 | Easy |
|
An Introduction to Carousels This screencast demonstrates how to use Sencha Touch to create carousel-based apps, such as this artist's portfolio. It also gives a brief introduction to the src.sencha.io resizing service. | 1.x | May 31, 2011 | Medium |
|
A Sencha Touch MVC application with PhoneGap In this article, we introduce PhoneGap, a way to package and allow web applications to access device functionality. We use its APIs to create a custom data proxy which underpins a Sencha Touch MVC application. By the end of the article, we will have demonstrated how to replicate the iPhone's address book application using web technology alone. | 1.x | Jan 29, 2011 | Hard |