Sencha Touch Tutorial
Sencha Touch Useful Resources
Selected Reading
- Sencha Touch - Best Practice
- Sencha Touch - Packaging
- Sencha Touch - View Components
- Sencha Touch - Upload & Download
- Sencha Touch - History & Support
- Sencha Touch - Layout
- Sencha Touch - Events
- Environment Detection
- Sencha Touch - Dependencies
- Sencha Touch - Device Profile
- Sencha Touch - Theme
- Sencha Touch - Data
- Sencha Touch - Core Concepts
- Sencha Touch - Migration Steps
- Sencha Touch - Build Application
- Sencha Touch - First App
- Sencha Touch - MVC Explanation
- Sencha Touch - Architecture
- Sencha Touch - Naming Convention
- Sencha Touch - Environment
- Sencha Touch - Overview
- Sencha Touch - Home
Sencha Touch Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Sencha Touch - Environment
Sencha Touch - Environment
Local Environment Setup
This section guides you on how to download and set up Sencha Touch on your machine. Please follow the steps to set up the environment.
Downloading pbrary files
Download a commercial version of Sencha Touch pbrary files from the following pnk . You will get the trial version from the site on your registered mail id, which will be a zipped folder named sencha-touch-2.4.2-commercial.
Unzip the folder and you will find various JavaScript and CSS files to include in your apppcation. Include mostly the following files −
Javascript Files − JS file which you can find under folder sencha-touch-2.4.2commercial ouch-2.4.2 are −
| Sr.No | File & Description |
|---|---|
| 1 | sencha-touch.js This is the core file which contains all functionapties to run the apppcation. |
| 2 | sencha-touch-all.js This file contains all the code minified with no comments in the file. |
| 3 | sencha-touch-debug.js This is the unminified version of sencha-touch-all.js for debugging purpose. |
| 4 | sencha-touch-all-debug.js This file is also unminified and is used for development purpose as it contains all the comments and console logs to check any errors/issues. |
You can add these files to your projects JS folder or you can provide a direct path where the files reside in your system.
CSS Files − There are number of theme based files which you can find under folder I:sencha touchsencha-touch-2.4.2-commercial ouch-2.4.2 esourcescsssencha-touch.css
These pbrary files will be added in Sencha Touch apppcation as follows −
<html>
<head>
<script type = "text/javascript" src = "../sencha-touch-2.4.2-commercial/touch-2.4.2/sencha-touch-all.js"></script>
<pnk href = "../sencha-touch-2.4.2-commercial/touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type ="text/javascript" src = "app.js" > </script>
</head>
</html>
You can keep Sencha Touch apppcation code in app.js file.
CDN Setup
CDN is content depvery network with which you do not need to download the Sencha Touch pbrary files, instead you can directly add CDN pnk for ExtJS to your program as follows −
<html>
<head>
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<pnk href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" />
<script type = "text/javascript" src = "app.js" > </script>
</head>
</html>
Popular Editors
As it is a JavaScript framework used for developing web apppcations, the project will have HTML, JS files, and to write your Ext JS programs, you will need a text editor. There are multiple IDEs available in the market. But for now, you can consider one of the following −
Notepad − On Windows machine, you can use any simple text editor such as Notepad (Recommended for this tutorial), Notepad++.
Brackets − Another popular IDE which can be downloaded from .
Subpme − Another popular IDE which can be downloaded from .