Hands-On Sencha Touch 2: A Real-World App Approach

344 Pages·2014·22.19 MB·English

by  Lee Boonstra

Hands-On Sencha Touch 2
Get hands-on experience building speedy mobile web apps with Sencha “ Lee Boonstra is an H
Touch 2.3, the user interface JavaScript framework built specifically for outstanding Sencha a
the mobile Web. With this book, you’ll learn how to build a complete
Touch developer, trainer,
touch application, FindACab, that has the look and feel of a native app on n
and writer. She also has
Android, iOS, Windows, and BlackBerry devices. d
incredible design skills
In the process, you’ll work with Sencha’s model-view-controller (MVC)
s
components for form handling, styling, integration with outside data, and and will help you build
-
other elements. The Sencha Touch learning curve can be steep, but if powerful Sencha Touch O
you’re familiar with JavaScript, HTML5, CSS3, and JSON, this guide will get
mobile apps fast.”
you up to speed through real-world examples. n
—David Marsland

Training Director, Sencha Inc.
■ Learn the fundamentals, including the class and layout systems S
■ Use the Sencha MVC architecture to structure your code e Hands-On
■ Implement data models and stores, and create an event n
controller
c
■ Make remote connections by implementing server proxies h Sencha
■ Save data offline by implementing client proxies
a
■ Work with view components such as maps, lists, and floating

panels T
■ Implement and handle forms, and construct a custom theme o
■ Create production and native build packages u
Touch 2
c
Lee Boonstra, lead technical trainer for Sencha in Europe, focuses on frontend
h
development and teaches Sencha Touch and Ext JS to engineers from all over
Europe. Previously a Java and frontend developer, she’s worked for creative
agencies on mobile applications for various clients. 2
B
o
o A REAL-WORLD APP APPROACH
n
s
t
r
a
WEB AND MOBILE APPS Twitter: @oreillymedia
facebook.com/oreilly
US $29.99 CAN $31.99
ISBN: 978-1-449-36652-0
Lee Boonstra
Hands-On Sencha Touch 2
Get hands-on experience building speedy mobile web apps with Sencha “ Lee Boonstra is an H
Touch 2.3, the user interface JavaScript framework built specifically for outstanding Sencha a
the mobile Web. With this book, you’ll learn how to build a complete
Touch developer, trainer,
touch application, FindACab, that has the look and feel of a native app on n
and writer. She also has
Android, iOS, Windows, and BlackBerry devices. d
incredible design skills
In the process, you’ll work with Sencha’s model-view-controller (MVC)
s
components for form handling, styling, integration with outside data, and and will help you build
-
other elements. The Sencha Touch learning curve can be steep, but if powerful Sencha Touch O
you’re familiar with JavaScript, HTML5, CSS3, and JSON, this guide will get
mobile apps fast.”
you up to speed through real-world examples. n
—David Marsland

Training Director, Sencha Inc.
■ Learn the fundamentals, including the class and layout systems S
■ Use the Sencha MVC architecture to structure your code e Hands-On
■ Implement data models and stores, and create an event n
controller
c
■ Make remote connections by implementing server proxies h Sencha
■ Save data offline by implementing client proxies
a
■ Work with view components such as maps, lists, and floating

panels T
■ Implement and handle forms, and construct a custom theme o
■ Create production and native build packages u
Touch 2
c
Lee Boonstra, lead technical trainer for Sencha in Europe, focuses on frontend
h
development and teaches Sencha Touch and Ext JS to engineers from all over
Europe. Previously a Java and frontend developer, she’s worked for creative
agencies on mobile applications for various clients. 2
B
o
o A REAL-WORLD APP APPROACH
n
s
t
r
a
WEB AND MOBILE APPS Twitter: @oreillymedia
facebook.com/oreilly
US $29.99 CAN $31.99
ISBN: 978-1-449-36652-0
Lee Boonstra
Hands-On Sencha Touch 2
Lee Boonstra
Hands-On Sencha Touch 2
by Lee Boonstra
Copyright © 2014 Lee Boonstra. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are
also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/
institutional sales department: 800-998-9938 or [email protected].
Editors: Meghan Blanchette and Brian Anderson Proofreader: Jasmine Kwityn
Production Editor: Nicole Shelby Indexer: Ellen Troutman
Copyeditor: Rachel Monaghan Cover Designer: Ellie Volckhausen
Technical Editors: Kevin Jackson, Max Rahder, and Paul Interior Designer: David Futato
Carstens Illustrator: Rebecca Demarest
July 2014: First Edition
Revision History for the First Edition:
2014-07-11: First release
See http://oreilly.com/catalog/errata.csp?isbn=9781449366520 for release details.
Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly
Media, Inc. Hands-On Sencha Touch 2, the image of a fossa, and related trade dress are trademarks of O’Reilly
Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark
claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and author assume no
responsibility for errors or omissions, or for damages resulting from the use of the information contained
herein.
ISBN: 978-1-449-36652-0
[LSI]
To Michele, the person who always stands by me and believes in me. (Even the few times
when I was wrong. Just a few times, though…)

Table of Contents
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Part I. Sencha Touch Essentials
1. Introduction to Sencha Touch. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Licenses 3
Bundles 3
Touch Charts 4
Sencha Cmd 4
Sencha Network 6
Sencha Try 6
Sencha Market 7
Sencha Devs 7
Sencha.io Src 7
Where to Find Help 9
Learning Center 9
Sencha Forums 9
Sencha Trainings 10
Buy Support 10
API Documentation 10
Kitchen Sink 12
Required Software 12
Supported Browsers 12
Summary 13
2. Installation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Install the Required Software 16
IDE or Editor 16
Modern Browser 16
v
Ruby 16
Java 17
Sencha Cmd 17
Web Server 19
Sencha Touch 20
Install the Optional Software 20
Sass and Compass 20
Install NodeJS 21
Install PhoneGap and Cordova 21
Development SDK 22
Summary 23
3. The Fundamentals. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Instantiating a Basic Component 26
Implementing Templates 29
Changing the Data at Runtime 29
Organizing Template Snippets 30
Implementing Advanced Templates 31
Making References to Components 32
Traversing Components 34
Making References to DOM Nodes 35
Ext.get() 36
Ext.select() 36
Ext.getDom() 37
Handling Events 38
Firing Events 39
Removing Events 41
Firing Custom Events 42
Summary 43
4. The Class System. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Defining Your Own Custom Class 45
Defining Getters and Setters 48
Defining Singletons and Static Members 51
Inherit from a Single Class 53
Inherit from Multiple Classes 56
Summary 58
5. The Layout System. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Implementing a Horizontal Layout 62
Implementing a Vertical Layout 67
Implementing a Full-Screen (Fit) Layout 73
vi | Table of Contents
Implementing a Card Layout 75
Implementing the Default Layout 78
Docking Components 79
Summary 81
Part II. Building the FindACab App
6. Structured Code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Design Patterns 85
The MVC Pattern 86
Sencha MVC 87
What Is Sencha Cmd? 90
Generating an Application with Sencha Cmd 91
Generating Workspaces 96
Generating a Model with Sencha Cmd 97
Implementing a Data Store 99
Implementing a View 101
Generating a Controller with Sencha Cmd 102
Referencing a Component from a Controller 104
Listening to Events from a Controller 106
Implementing the MVC Entry Point 107
Loading External Classes 110
Summary 112
7. Data Models. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Validating a Model 117
Saving a Model to the Server 120
Cross-Domain Restrictions 122
Implementing a Model Association 123
Remote Associations 127
Summary 129
8. Remote Connections (Server Proxies). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Saving or Retrieving Data from the Same Domain with AJAX 132
Implementing AJAX Proxies 132
Implementing an AJAX Request 137
Retrieving Data from an External Domain with JSONP 140
Implementing JSONP Proxies 141
Implementing the JSONP Proxy for the FindACab App 142
Implementing a JSONP Request 146
Saving or Retrieving Data from an External Domain with AJAX 148
Table of Contents | vii
Implementing CORS 148
Summary 149
9. Data Stores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Loading Data in a Store 151
Sorting a Data Store Locally 154
Sorting Data on a Server 156
Grouping a Data Store 158
Filtering a Data Store Locally 159
Custom Filter Functions 160
Stacking Filters 160
Filtering Data on a Server 161
Syncing Data in a Store 163
Summary 166
10. Offline Storage (Client Proxies). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Saving Data into Local Storage 169
Saving Data into Session Storage 172
Saving Data into a Web SQL Database 173
Saving Data into a Web SQL Database for the FindACab App 175
Saving Assets Locally by Using the Application Cache 181
Summary 184
11. View Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Implementing a Messagebox 186
Implementing Toolbars and Title Bars 190
Implementing Buttons 194
Implementing Lists 199
Implementing a List for the FindACab App 201
Implementing a Google Map 205
Implementing Overlays 216
Implementing Charts 223
Summary 229
12. Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Implementing a Form 233
Implementing the FindACab App Form 234
Implementing a Fieldset 234
Validating a Form 237
Validating a Form in the FindACab App 238
Submitting a Form 241
Implementing Form Handling 244
viii | Table of Contents