Sencha Touch In Action Jesus Garcia Anthony De Moss Mitchell Simoens

Sencha Touch In Action Jesus Garcia Anthony De
Moss Mitchell Simoens download
https://ebookbell.com/product/sencha-touch-in-action-jesus-
garcia-anthony-de-moss-mitchell-simoens-4442414
Explore and download more ebooks at ebookbell.com

Here are some recommended products that we believe you will be
interested in. You can click the link to download.
Sencha Touch Cookbook Ajit Kumar
https://ebookbell.com/product/sencha-touch-cookbook-ajit-kumar-2492196
Sencha Touch 10 Mobile Javascript Framework Build Web Applications For
Apple Ios And Google Android Touchscreen Devices With This First Html5
Mobile Framework 1st Edition Narasimha Rao
https://ebookbell.com/product/sencha-touch-10-mobile-javascript-
framework-build-web-applications-for-apple-ios-and-google-android-
touchscreen-devices-with-this-first-html5-mobile-framework-1st-
edition-narasimha-rao-4107484
Sencha Touch 2 Up And Running Adrian Kosmaczewski
https://ebookbell.com/product/sencha-touch-2-up-and-running-adrian-
kosmaczewski-4545988
Sencha Touch 2 Mobile Javascript Framework John Earl Clark Bryan P
Johnson
https://ebookbell.com/product/sencha-touch-2-mobile-javascript-
framework-john-earl-clark-bryan-p-johnson-4681436

Sencha Touch Cookbook 2nd Edition Over 100 Handson Recipes To Help You
Understand The Complete Sencha Touch Framework And Solve Your Daytoday
Problems Ajit Kumar
https://ebookbell.com/product/sencha-touch-cookbook-2nd-edition-
over-100-handson-recipes-to-help-you-understand-the-complete-sencha-
touch-framework-and-solve-your-daytoday-problems-ajit-kumar-5474656
Sencha Touch Cookbook 2nd Edition Kumar Ajit
https://ebookbell.com/product/sencha-touch-cookbook-2nd-edition-kumar-
ajit-11860694
Instant Sencha Touch 1st Edition Hiren J Dave
https://ebookbell.com/product/instant-sencha-touch-1st-edition-hiren-
j-dave-51281928
Creating Mobile Apps With Sencha Touch 2 John Earl Clark Bryan P
Johnson
https://ebookbell.com/product/creating-mobile-apps-with-sencha-
touch-2-john-earl-clark-bryan-p-johnson-4547422
Handson Sencha Touch 2 A Realworld App Approach 1st Edition Lee
Boonstra
https://ebookbell.com/product/handson-sencha-touch-2-a-realworld-app-
approach-1st-edition-lee-boonstra-4768206

M A N N I N G
Jesus Garcia
Anthony De Moss
Mitchell Simoens
IN ACTION

Sencha Touch
in Action
JESUS GARCIA
ANTHONY DE MOSS
MITCHELL SIMOENS
M A N N I N G
SHELTER ISLAND

For online information and ordering of this and other Manning books, please visit
www.manning.com. The publisher offers discounts on this book when ordered in quantity.
For more information, please contact
Special Sales Department
Manning Publications Co.
20 Baldwin Road
PO Box 261
Shelter Island, NY 11964
Email: orders@manning.com
©2013 by Manning Publications Co. All rights reserved.
No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in
any form or by means electronic, mechanical, photocopying, or otherwise, without prior written
permission of the publisher.
Photographs in this book were created by Martin Evans and Jordan Hochenbaum, unless
otherwise noted. Illustrations were created by Martin Evans, Joshua Noble, and Jordan
Hochenbaum. Fritzing (fritzing.org) was used to create some of the circuit diagrams.
Many of the designations used by manufacturers and sellers to distinguish their products are
claimed as trademarks. Where those designations appear in the book, and Manning
Publications was aware of a trademark claim, the designations have been printed in initial caps
or all caps.
Recognizing the importance of preserving what has been written, it is Manning’s policy to have
the books we publish printed on acid-free paper, and we exert our best efforts to that end.
Recognizing also our responsibility to conserve the resources of our planet, Manning books
are printed on paper that is at least 15 percent recycled and processed without the use of
elemental chlorine.
Manning Publications Co. Development editor: Frank Pohlmann
20 Baldwin Road Technical proofreader: Jamund Ferguson
PO Box 261 Copyeditor: Liz Welch
Shelter Island, NY 11964 Proofreader: Melody Dolab
Typesetter: Dennis Dalinnik
Cover designer: Marija Tudor
ISBN: 9781617290374
Printed in the United States of America
1 2 3 4 5 6 7 8 9 10 – MAL – 19 18 17 16 15 14 13

To my wife Erika and my sons Takeshi and Kenji
—J.G.

vii
brief contents
PART 1 INTRODUCTION TO SENCHA TOUCH. ............................1
1 ■ Introducing Sencha Touch 3
2 ■ Using Sencha Touch for the first time 23
3 ■ Sencha Touch foundations 40
PART 2 BUILDING MOBILE USER INTERFACES............................53
4 ■ Mastering the building blocks 55
5 ■ Toolbars, buttons, and docked items 85
6 ■ Getting the user’s attention 104
7 ■ Data stores and views 123
8 ■ Working with forms 149
9 ■ Maps and media 177
PART 3 CONSTRUCTING AN APPLICATION ..............................195
10 ■ Class system foundations 197
11 ■ Building Sencha Touch applications 231

ix
contents
preface xv
acknowledgments xvii
about this book xix
about the authors xxii
about the cover illustration xxiii
PART 1 INTRODUCTION TO SENCHA TOUCH . ................1
1 Introducing Sencha Touch 3
1.1 What is Sencha Touch? 4
What Sencha Touch is not 6 ■ Lots of wiring under the hood 6
Hardware compatibility 6 ■ Full-screen goodness 7
1.2 A 10,000-foot view 7
1.3 The Sencha Touch UI 9
Containers 9 ■
Controlling your UI with the Tab panel 10
Accepting input with the Form panel 10 ■
Sheets and pickers 13
Data-bound views 15 ■
Maps and Media 18
1.4 Thinking like a mobile developer 18
Think lightweight 19 ■
Remember—it’s a browser! 19
Throw away what you don’t need 20 ■
“finger” !== “mouse” 20
Reduce the data 21
1.5 Summary 21

CONTENTS
x
2 Using Sencha Touch for the first time 23
2.1 License considerations 23
2.2 Unpacking the framework 24
2.3 Sencha Touch says “Hello World” 26
2.4 Setting the stage for your first application 29
Your simple application at a glance 29
Preparing your project 29
2.5 Developing your app 31
Creating the data store 32 ■
Constructing the PersonList
class 33 ■
Building PersonDetail 34 ■
Setting up the
MainContainer class 35 ■
Rendering your application 37
2.6 Summary 39
3 Sencha Touch foundations 40
3.1 One Component model to rule them all 41
3.2 Introducing the component life cycle 43
Initialization/instantiation phase 43 ■
Render phase 46
Destruction phase 48
3.3 XTypes and the ComponentManager 50
Examples of instantiations 50 ■ The pros and cons 51
3.4 Summary 52
PART 2 BUILDING MOBILE USER INTERFACES ................53
4 Mastering the building blocks 55
4.1 Containers: Mounting our UI workhorse 56
Container’s anatomy 56 ■ Keeping unruly children
on the right track 57 ■ Ask and ye shall receive:
querying the container hierarchy 61
4.2 Everything must have its place: layouts 63
The default layout 63 ■
Make it fit: the fit layout 65
Card layout 67 ■
HBox and VBox layouts 70
Nesting layouts 72
4.3 Floating away… with panels 76
4.4 Flip the deck with TabPanels 80
4.5 Summary 84

CONTENTS xi
5 Toolbars, buttons, and docked items 85
5.1 Looking into docked items 86
Understanding the basics 86 ■ Dynamic docking 89
5.2 Gearing up the toolbars 92
Under the hood 92 ■ Adding buttons to a toolbar 93
Centering items 95 ■ Adding nonstandard components 97
5.3 Go ahead, press my button! 98
Customizing buttons 99
5.4 Summary 103
6 Getting the user’s attention 104
6.1 Using sheets for modal user interactions 105
Using sheets for simple overlays 107 ■ Using ActionSheets 110
6.2 Choosing pickers 112
Creating a basic picker 112 ■
Date picker 114
6.3 Talking to the user via a message box 115
Alerting users 116 ■
Prompting users 117
Requesting input from users 120
6.4 Summary 122
7 Data stores and views 123
7.1 Examining data stores 124
The anatomy of data stores 124 ■
Using proxies
to load data 125 ■
Using readers to digest data 126
Understanding models 127 ■
Writer to sync 128
Simple store example 128
7.2 Implementing DataView 130
How DataViews work 130 ■
Walking through XTemplate 131
Implementing your first DataView 134
7.3 Advanced features with List 135
How List differs from DataView 135 ■ CSS differences between
List and DataView 136 ■ Using infinite data with List 137
Advanced features for List 140 ■ Example of IndexBar,
grouping, and disclosures 141
7.4 Displaying hierarchical data with NestedList 143
Understanding the hierarchical data 144 ■ Using TreeStore 145
Creating a basic nested list 146 ■ Showing details 147
7.5 Summary 148

CONTENTS
xii
8 Working with forms 149
8.1 What makes Form panels so special anyway? 149
8.2 Building a basic form 151
8.3 An overview of the different Form widgets 154
Text field 154 ■
URL field 155 ■
Email field 156
Number field 156 ■
Password field 156 ■
Text area 157
Check box field 157 ■
Radio field 157 ■
Date Picker field 158
Spinner field 158 ■
Slider field 159 ■
Toggle field 159
Select field 160
8.4 Building complex forms 162
More organized forms with fieldsets 162
Multicolumn forms 163 ■
Doing more with
your multicolumn form 167
8.5 Managing data with models 168
Submitting data 168 ■
Loading data into your form 169
8.6 Binding a form to a list 172
8.7 Summary 176
9 Maps and media 177
9.1 Maps in your application 177
Maps under the hood 178 ■
Location awareness 178
Creating a simple map 179 ■
Getting advanced with
Google Maps API 180
9.2 Handling images 182
Image basics 182 ■
Preloading an image with a spinner 184
9.3 Mastering media 186
Media base 186 ■
Listening to audio 189
Playing video 190 ■
Things to keep in mind 193
9.4 Summary 193
PART 3 CONSTRUCTING AN APPLICATION...................195
10 Class system foundations 197
10.1 Classic JavaScript inheritance 198
Inheritance with JavaScript 199
10.2 Using the Sencha Touch class system 201
Using Ext.define 201

CONTENTS xiii
10.3 Extending Sencha Touch components 205
Thinking about what you’re building 206 ■ Getting the CSS and
icons out of the way 207 ■ Creating the ActionListItem class 208
Creating the ActionList class 216
10.4 Creating a Sencha Touch plug-in 221
The anatomy of a plug-in 221 ■
Developing your plug-in 223
10.5 Summary 229
11 Building Sencha Touch applications 231
11.1 The Sencha 30,000-foot view 232
11.2 Typical application development workflow 232
What is Sencha Cmd? 234 ■
Obtaining Sencha Cmd 235
11.3 Creating your application container 235
Examining Cmd app resources 237
11.4 A view of what you’re building today 238
Looking at what you’re building 238
A quick glance at the namespace 240
11.5 Building the Phone profile version of your
application 242
Developing your data model and store 243 ■
Creating the generic
main view class 244 ■
Looking at app.js for the first time 247
Checking in on progress 250 ■
A quick lesson on how
applications bootstrap 251 ■
Adding the Phone profile 254
Introducing the common controller 256 ■
Adding the Phone
profile controller 257 ■
Adding the Phone profile main view 258
Building the data-driven ContactsList view 260 ■
Creating the
ContactDetails view 262 ■
Wiring up the workflow models
into the controllers 263 ■
Adding the Phone profile
main controller 266
11.6 Building the tablet version of your application 269
Building the Tablet profile class 270 ■ Constructing the tablet
main view 271 ■ Constructing the tablet controller 272
11.7 Packaging your application for web deployment 274
Creating a testing build 274 ■
Creating a production build 276
A deep dive into the production Microloader 277 ■
Creating a
production delta build 280 ■
Where to go from here? 282
11.8 Summary 283
index 285

xv
preface
I started my career in the world of Sencha back in 2006 when the precursor to what’s
known as ExtJS today (Sencha’s desktop JavaScript framework) was still an experi-
ment. Soon after my introduction, I became addicted to the design patterns that were
promoted by the quickly evolving framework. But more importantly, I fell in love with
the thriving community of developers looking to contribute.
I was inspired by many of the active members and decided to become a contribut-
ing member myself, spending tens of hours per week answering people’s questions,
writing blog posts, and eventually publishing instructional screencasts.
I can remember the feeling of excitement when I learned of the development of
Sencha Touch back in 2009. Back then, HTML5 was something that people didn’t talk
about much, and it was only a draft specification. In 2012, Sencha Touch 1.0 arrived
and was the first HTML5 mobile framework on the market. A lot of the technology
driving Sencha Touch is considered revolutionary in the industry. For example, the
Sencha Touch scroller is one of the most robust and smoothest available for single-
page applications for mobile devices.
To be honest, I’d never done mobile development before then. I didn’t own a
smartphone and I didn’t know much about WebKit. I’m happy to say that Sencha
Touch changed all that for me!
The reason I got into mobile development was because Sencha Touch allowed me
to use my existing HTML, JavaScript, and CSS skills to build applications for smart-
phones. Back in 2009, I didn’t have time to learn Objective C and I honestly didn’t
care much for Java.

PREFACE
xvi
Fast forward to 2013, and I’m in awe at what I’ve been able to accomplish with this
framework. From all of the activity that I’ve been a part of over the past few years, I was
led here, to share with you what I know, once again contributing to the now known
and still thriving Sencha community.
JAY GARCIA

xvii
acknowledgments
Anthony DeMoss—From the beginning, you’ve worked with me to get this manuscript
developed for Sencha Touch 1.0 and then worked feverishly to get it migrated to 2.0.
I’m happy we got a chance to work on this together.
Mitchell Simoens—Your knowledge of the framework has been ever-evolving and
it’s been a pleasure to follow your career growth. Being a coauthor of this manuscript
is a testament to how much you’ve achieved over the past few years.
Abe Elias—You have been an amazing friend and mentor to me. Thank you for
your continued advice throughout the years and for affording me the opportunities to
work closely with the various Sencha teams and gain experiences that help me push
my knowledge forward.
Jamie Avins—Thank you for your continued support with the Sencha Touch
framework. Having you available to ask questions and bounce ideas off has been
immensely helpful and I’m grateful to you for that.
Jacky Nguyen—As part of the Sencha community, we recognize the technical
achievements you’ve made possible with Touch 2.0. You were there for me when I was
faced with technical challenges that were beyond my experience.
Ed Spencer—Even though you’re no longer with Sencha, your contributions to my
early knowledge of Touch haven’t been forgotten. Your presence in the Sencha com-
munity is missed.
Don Griffin—Thank you for the back-and-forth when it came to Sencha Cmd! Gain-
ing access to this tool in its infancy helped me close the final chapter for this book.

ACKNOWLEDGMENTS
xviii
Sebastian Sterling—The publication of this book has taken a lot longer than we
anticipated. As my primary developmental editor at Manning, you challenged my writ-
ing and helped me bring out the best content.
Frank Pohlmann—Frank, you came in at a busy point in the development of this
manuscript and you did a hell of a job getting things right for production. Thank you.
Liz Welch—Thank you for the hard work in getting this manuscript better orga-
nized during the copyediting phase. It’s been an absolute pleasure working with you.
Jamund Ferguson—Thank you for your careful technical proofread of the final
manuscript shortly before it went into production.
Our reviewers—Thanks for reading the manuscript at various stages of its devel-
opment and for providing invaluable feedback: Àlex Madurell, Darragh Duffy,
Doug Warren, Frank Ableson, Grgur Grisogono, J.J. van de Merwe, Loiane Groner,
Matt Goldspink, Pawankumar Tripathi, Robi Sen, Stuart Davies, Tony Niemann, and
Vincent Winckelmans.
Finally, to my wife, Erika: You’ve supported me in everything I’ve aimed for, and I
know that you’ve sacrificed time with me so that I could share my knowledge with oth-
ers. You always push me to do better and I’m truly grateful to you. Also to my sons,
Takeshi and Kenji: Thank you for the adventures you put your mom through while I
worked on this book in my basement “man cave.” The stories she’s told me certainly
have been colorful.
JAY GARCIA

xix
about this book
This book is designed to walk you through the flexible and powerful mobile HTML5
framework, Sencha Touch, from explaining the basics all the way to developing and
deploying production mobile web applications. After you’ve read this book, you
should be able to develop mobile HTML5 applications for tablets and phones.
Who should read this book
This book is intended for developers who want to create rich mobile HTML5 applica-
tions that feel native using Sencha Touch. Although Sencha Touch is highly cus-
tomizable, this book is targeted at those who primarily do the programming part of
specification implementation.
The book assumes you already have a working understanding of how websites
interact with web servers. To be most effective in writing robust and responsive
applications, you need a solid background in core technologies like HTML, CSS,
JavaScript, and JSON. The only thing we cover in detail about these core technologies
is in chapter 10, where we discuss prototypal inheritance with JavaScript, a prerequi-
site to the Sencha Touch class system.
What you’ll need
This book has a lot of hands-on examples that we walk you through. To get the most
value out of this book, you need the following:
■ A web server (Apache HTTPD or Microsoft IIS recommended)
■ An intelligent IDE (WebStorm or Aptana recommended)

ABOUT THIS BOOK
xx
■ Sencha Cmd installed (available at www.sencha.com/products/sencha-cmd/
download)
Roadmap
This book is designed to give you a guided tour of Sencha Touch. During this tour,
we’ll focus on many of the rich features that Sencha Touch provides, including UI wid-
gets, data stores, models, and proxies. This tour consists of 11 chapters.
Chapter 1 is an introductory chapter, focused on getting you familiar with the
framework. This chapter takes a top-down view of the framework, and we’ll discuss
many of the commonly used widgets. We’ll also talk about what it’s like to think like
a mobile developer.
In chapter 2, you’ll get your feet wet and learn how the framework is delivered to
you and about its contents. In this chapter, you’ll develop a simple application.
Chapter 3 details foundational topics, such as the Component model and the compo-
nent life cycle. We’ll also talk about how Sencha Touch allows you to lazy-instantiate com-
ponents and how components are tracked with a class called Ext.ComponentManager.
Chapter 4 provides a deep understanding of how containers play an important
role in your applications and how they implement layouts. You’ll learn the ins and
outs of the various layouts.
Chapter 5 focuses on how components are “docked” within your UI. You’ll also
learn how toolbars work and how to implement buttons with proper spacing.
Chapter 6 addresses how to get the user’s attention with core widgets such as the
sheet, picker, and message box. What you learn in this chapter will come in handy
when it comes to notifying a user of activity or requesting information from them.
Chapter 7 gives you an opportunity to take a small break from the UI world for a
bit and focuses primarily on data management. You’ll take an in-depth look at data
stores and their supporting classes, Model and Proxy. You’ll also use data stores with
the List and NestedList widgets.
Chapter 8 shows you how to get information from the user via Form panels. We’ll
discuss the various form input fields and what it takes to use them effectively.
In chapter 9 you’ll learn how to render Google maps in your applications. You’ll
also get an opportunity to use the Sencha Touch Media widget to render video and lis-
ten to audio via your browser’s native HTML5 media tags.
Chapter 10 focuses on object-oriented JavaScript and shows you how to use the
Sencha Touch class system to create custom extensions. You’ll get hands-on experi-
ence creating a custom extension and a plug-in.
Chapter 11 deals with the development of an application. You’ll see how to boot-
strap an application with Sencha Cmd and then move on to developing an application
using Sencha Touch. Once the application is developed, you’ll learn how to create
testing and production builds for deployment.

ABOUT THIS BOOK xxi
Code conventions
All source code in listings or in text is in a fixed-width font like this to separate it
from ordinary text. We make use of many languages and markups in this book—
JavaScript, HTML, CSS, XML, Java, and JSP—but we tried to adopt a consistent approach.
Method and function names, properties, XML elements, and attributes in text are pre-
sented using this same font.
In many cases, the original source code has been reformatted: we’ve added line
breaks and reworked indentation to accommodate the available page space in the book.
In rare cases even this was not enough, and some listings include line-continuation
markers. Additionally, many comments have been removed from the listings.
Code annotations accompany many of the listings, highlighting important con-
cepts. In some cases, numbered bullets link to explanations that follow the listing.
Getting the latest examples
The examples in this book are designed to be easy to navigate. Every chapter has its own
folder, with each example named in accordance to the listing to which it corresponds.
We’ll work to keep the examples up to date as the framework gets upgraded. To get the
latest version of the examples, visit https:/
/github.com/ModusCreateOrg/sencha-touch-
in-action-examples or the publisher’s website at manning.com/SenchaTouchinAction.
Author Online
Purchase of Sencha Touch in Action includes free access to a private web forum run by
Manning Publications where you can make comments about the book, ask technical
questions, and receive help from the authors and from other users. To access the forum
and subscribe to it, point your web browser to manning.com/SenchaTouchinAction.
This page provides information on how to get on the forum once you are registered,
what kind of help is available, and the rules of conduct on the forum.
Manning’s commitment to our readers is to provide a venue where a meaningful
dialogue between individual readers and between readers and the authors can take
place. It’s not a commitment to any specific amount of participation on the part of the
authors, whose contribution to the book’s forum remains voluntary (and unpaid). We
suggest you try asking the authors some challenging questions, lest their interest stray!
The Author Online forum and the archives of previous discussions will be accessi-
ble from the publisher’s website as long as the book is in print.
Two other author resources are: Jay’s blog athttp:/
/moduscreate.com/ and Mitch-
ell’s blog at http:/
/mitchellsimoens.com/
.

xxii
about the authors
JAY GARCIA is CTO and cofounder of Modus Create, a company focused on delivering
high-end solutions with Sencha products. Jay’s involvement with the world of Sencha
started in 2006. Since that time, Jay has been focused on knowledge sharing through
books, blog articles, screencasts, meetups, and conferences.
ANTHONY DEMOSS is an entrepreneur who has been involved with Sencha-related
projects since 2007, focusing on enterprise-level applications. Anthony has developed
a custom Sencha Touch 2 front-end for Jira and shares his knowledge via blog posts
and meetup presentations.
MITCHELL SIMOENS is the internet forum manager at Sencha. Mitchell’s involvement
in the community includes helping individuals solve problems and produce profes-
sional-grade extensions for Sencha Touch.

xxiii
about the cover illustration
The figure on the cover of Sencha Touch in Action is captioned an “Inhabitant of Novi-
grad in the lowlands, Dalmatia.” Novigrad is a little historic fishing village situated on a
narrow inlet of the Novigrad Sea on the Adriatic coast in the region of Dalmatia in what
is now Croatia. This illustration is taken from a recent reprint of Balthasar Hacquet’s
Images and Descriptions of Southwestern and Eastern Wenda, Illyrians, and Slavs published
by the Ethnographic Museum in Split, Croatia, in 2008. Hacquet (1739–1815) was an
Austrian physician and scientist who spent many years studying the botany, geology,
and ethnography of many parts of the Austrian Empire, as well as the Veneto, the
Julian Alps, and the western Balkans, inhabited in the past by peoples of many differ-
ent tribes and nationalities. Hand-drawn illustrations accompany the many scientific
papers and books that Hacquet published.
The rich diversity of the drawings in Hacquet’s publications speaks vividly of
the uniqueness and individuality of Alpine and Balkan regions just 200 years ago.
This was a time when the dress codes of two villages separated by a few miles iden-
tified people uniquely as belonging to one or the other, and when members of an
ethnic tribe, social class, or trade could be easily distinguished by what they were
wearing. Dress codes have changed since then and the diversity by region, so rich
at the time, has faded away. It is now often hard to tell the inhabitant of one conti-
nent from another and the residents of the picturesque towns and villages on the
Adriatic coast are not readily distinguishable from people who live in other parts
of the world.

ABOUT THE COVER ILLUSTRATION
xxiv
At a time when it is hard to tell one computer book from another, we at Manning
celebrate the inventiveness, the initiative, and the fun of the computer business with
book covers based on costumes from two centuries ago brought back to life by illustra-
tions such as this one.

Part 1
Introduction
to Sencha Touch
Welcome to Sencha Touch in Action, an in-depth guide into the world of
Sencha Touch. In this book, in addition to learning how to get things done
using the Sencha Touch framework, you’re going to learn how the various com-
ponents and widgets that comprise the framework work and operate.
Chapters 1 through 3 are designed to give you the essential knowledge to
understand many of the fundamental aspects of the framework. Your journey
begins with chapter 1, where you’ll learn the basics of the framework. Chapter 2
is your “boot camp” chapter and is where you’ll get your first exposure to devel-
oping with the framework. Chapter 3 covers some of the internal machinery of
the framework, such as the Component and Container models.
After reading the chapters in part 1 you’ll be ready to explore the many wid-
gets that compose Sencha Touch.

3
Introducing Sencha Touch
You’re on the hook to build a mobile application. Perhaps you’ve been tasked
with a project, or you have a great idea and want to make it a reality. Either way,
to build your application you’re going to have to learn at least Objective C for
iOS or Java for Android. It should be no surprise that if you want to support both
types of devices you’ll have to learn and master both languages, unless you
choose a third-party native framework like Sencha Touch to bridge the gap
between the devices.
Chances are you have experience in HTML, CSS, and JavaScript and want to use
what you already know to build your mobile application. The ability to tie in your
prior experience is part of what makes Sencha Touch a good choice for folks like
you and me, because it offers a wide range of UI widgets to choose from, as well as
robust data, layout, and component models.
In this chapter you’ll begin your journey into the world of Sencha Touch, where
you’ll learn what Sencha Touch is and the problems it aims to solve, such as enabling
This chapter covers
■ Solving problems with Sencha Touch
■ Using the Sencha Touch UI palette
■ Thinking like a mobile-web developer

4 CHAPTER 1 Introducing Sencha Touch
development of cross-platform user interfaces with HTML5. Then we’ll look at the wid-
gets that the framework provides. Lastly we’ll discuss some of the ways you should think
about developing your mobile application to avoid future performance issues.
What you’ll learn along the way is that developing mobile applications with this
framework isn’t as difficult as with other technologies such as Objective C or Java.
1.1 What is Sencha Touch?
Sencha Touch was born out of the culture and many of the ideas from the venerable
Ext JS framework and is the first mobile HTML5 JavaScript framework.
Sencha Touch solves cross-platform mobile app development problems by giving
developers the tools necessary to build cross-platform applications that mimic natively
compiled applications, while making full use of HTML5 and CSS3. It also allows devel-
opers who have years of experience on the web to develop cross-platform mobile apps
that can exist solely on the web, or be deployed in an app store with either the Sencha
native packager or tools like PhoneGap.
As of this writing, Sencha Touch runs on mobile WebKit-based browsers in iOS
(iPhone, iPad) devices as well as on Android phones and tablets.
Figure 1.1 Checkout is a full-screen Sencha Touch application that allows you to keep tabs on your
GitHub account and followers. You can learn more about it at http:/
/checkout.github.com.

5
What is Sencha Touch?
An excellent example of a Sencha Touch application is Checkout, by Steffen Hiller,
shown in figure 1.1 running on an iPad. Here you can see an application that makes
use of Sencha Touch providing a rich UI with HTML5.
To see other Sencha Touch applications you can point your browser to http:/
/
sencha.com/apps and view the Sencha Touch App Gallery (figure 1.2). Here you can
preview apps via images and even see them work live via embedded links.
Much like Ext JS, Sencha Touch creates the feel of a native application by means of
a clever blend of HTML5, CSS3, and JavaScript, all optimized for the best possible
mobile experience given the constraints of mobile devices today, such as limited CPU
and memory for your applications.
Read about HTML5
HTML5 is a collection of technologies that includes enhancements to HTML itself,
CSS3, and even JavaScript. It’s changing the way we develop web applications by
providing JavaScript API access to do things like talk directly to a graphics card
(WebGL), manipulate sound, and even provide offline storage. Though it’s not
completely necessary to know everything about HTML5 to use Sencha Touch, it’s
a good idea to get the basics down. A great site for learning about HTML5 is
www.html5rocks.com.
Figure 1.2 The Sencha Touch App Gallery

Also like its big brother Ext JS, Sencha Touch is designed to be extensible and
modifiable out of the proverbial box.
1.1.1 What Sencha Touch is not
Although Sencha Touch works on desktop WebKit browsers, like Safari and Chrome
(to a limited extent), it isn’t designed for desktop rich internet applications. Upon its
release lots of developers balked at the idea of this framework not functioning in
Firefox or Internet Explorer.
The fact is that Sencha Touch is aimed at the development of mobile applications
only. This means that if you’ve only developed applications with Firefox, IE, and their
respective debugging toolkits, you’re going to have to leave your comfort zone.
1.1.2 Lots of wiring under the hood
To make use of mobile device interactions Sencha Touch comes with a gesture library,
which allows you to easily hook into gesture-based events, such as tap, pinch, and
swipe. One way Sencha Touch comes close to the feel of native applications is by
means of a custom physics-based Scroller class, which uses hardware-accelerated
CSS3 transitions and includes key variables like slide friction and spring effects.
1.1.3 Hardware compatibility
Many mobile touch-screen smart devices are entering the marketplace today, which is
driving the increase in demand for mobile applications. Though Sencha Touch aims
at 100% compatibility across all mobile devices the best user experience is on iOS and
high-powered Android devices.
“Sencha Touch” !== “Ext JS”
If you’re a veteran Ext JS developer you’ll feel right at home when learning Sencha
Touch. It’s important to know that some significant differences exist between the two
libraries. Throughout this book we’ll point out some of the differences, but we can’t
cover every possible point. If you have doubts always check the API documentation.
If you’re unfamiliar with Ext JS and need to develop applications for the desktop web
check out Ext JS in Action (Manning, 2010).
Why the difference in user experience?
The main reason for the difference in user experience between iOS and Android has
to do with the physical computing power of each device and how each device manufac-
turer compiles mobile WebKit for their device. Apple devices include a GPU and compile
mobile Safari with GPU acceleration enabled. Most Android devices don’t have dedi-
cated GPUs. And even for the ones that do, manufacturers typically don’t compile
mobile WebKit to enable GPU acceleration.

7
A 10,000-foot view
Sencha Touch applications do such a great job of mimicking how native applications
look and feel that it’s often easy to get lost in the fact that you’re using a web-based
application. This especially holds true when the mobile WebKit toolbars are hidden
from view.
1.1.4 Full-screen goodness
Figure 1.3 illustrates how a Sencha Touch application looks when accessing the appli-
cation via mobile Safari (left) compared to accessing the application via a shortcut on
your home screen.
After you look at figure 1.3 it should be clear that a full-screen view of a Sencha
Touch application closely resembles a native application. Also having your app in
full screen means that there’s more much-needed screen real estate available
in your applications.
Sencha Touch offers a lot when it comes to UI widgets, but it’s certainly just the sur-
face of this framework. If you’re like us you probably want to just skip ahead and dive
into code. But before you get your hands dirty let’s browse through the library and
discuss some of its features.
1.2 A 10,000-foot view
If you glanced at the Sencha Touch API documentation the sheer number of classes in
the library might have overwhelmed you. To make sense of it all you must understand
that these classes can be broken down into a few major groups. Table 1.1 describes the
major groups into which Sencha Touch is broken down.
Figure 1.3 Looking at the
Sencha Touch kitchen sink
example via Mobile Safari
directly (left), or a shortcut
on your home screen (right)

The base library for Sencha Touch is known as Sencha Platform. Sencha Platform is
based off Ext JS 4.0 but is much improved in many respects. The class system in Sencha
Touch resembles that of Ext JS 4, but it’s much more advanced in many ways. For
example, it includes a feature known as Config System which allows Sencha Touch to
work much more effectively than Ext JS.
The Layout portion of Sencha Touch is implemented by some of the UI widgets
and is the code responsible for visually organizing items on the screen. The layouts
are responsible for implementing transitional animations if configured to do so.
The Utilities section of the framework is a collection of useful bits of functionality
that are often implemented by the framework and can be implemented by you. For
instance, the List widget implements XTemplate to paint HTML fragments on screen.
The XTemplate is open for you to use to do the same in your own custom widget.
The Data package is a group of classes that gives Sencha Touch the ability to fetch
and read data from a myriad of sources, including mobile WebKit’s HTML5 Session,
Local, and Database Storage methods. Sencha Touch can read data in a variety of for-
mats, including XML, Array, JSON, and Tree (nested).
The Style area of the framework isn’t something that you typically deal with on
a day-to-day basis, but it’s worth mentioning. From the very beginning Sencha
Touch has implemented Sass to allow easy style changes to the UI. This means that
if you want to change your entire color scheme you can do so with relative ease if
you know Sass.
Table 1.1 Describing the various sections of the Sencha Touch framework
Group Purpose
Platform This is the shared base of Sencha Touch and Ext JS v4, and the bulk of the code for
Sencha Touch.
Layout A set of managers for visually organizing widgets on screen.
Utilities A group of useful odds and ends for the framework.
Data Data is the information backbone for Sencha Touch and includes the means for
retrieving, reading, and storing data.
Style Sencha Touch’s theme is automatically generated via Sass (Syntactically Awesome
Style Sheets).
MVC Sencha Touch comes with an MVC framework for your application.
UI Widgets A collection of visual components that your users will interact with.
Learn more about Sass
Sass has taken the world of style sheet management by storm and has arguably rev-
olutionized how people style their web pages and apps. To learn more about this util-
ity check out Sass and Compass in Action (Manning, 2013).

9
The Sencha Touch UI
Sencha Touch includes an MVC framework that allows developers familiar with that
pattern to develop applications within a familiar workspace. It also contains a custom
URL routing mechanism and history state support.
The widgets that users will interact with in your application comprise the UI
portion of Sencha Touch. When thinking about designing and constructing your
applications you have a lot to choose from, which is why it’s a good idea to look at
each of them.
1.3 The Sencha Touch UI
The Sencha Touch UI is a rich mixture of widgets that can be displayed on screen for
you and your users to interact with. The UI palette is large, and table 1.2 helps you
identify the groups of UI components.
After reviewing the groups we’ll dive deeper into each group and discuss the UI
components in greater detail.
Now that you have a good overview of the widget groups let’s begin our visual exploration.
1.3.1 Containers
Containers in Sencha Touch do the heavy lifting when it comes to managing widgets
inside of widgets. Container is what we like to call the workhorse of Sencha Touch
applications because it offers extreme configurability and flexibility. Containers can
dock child widgets to their sides or render child widgets inside of their bodies. To see
what we mean take a look at figure 1.4.
In figure 1.4 you see a container with three docked items. We have a toolbar
docked at the top, List view docked on the left, and another toolbar docked at the bot-
tom. Notice how the top-docked toolbar simply contains a title, whereas the bottom
toolbar contains buttons. This shows some of the power and flexibility of the toolbars.
If you need to display screens controlled by a toolbar the Tab panel will get the
job done.
Table 1.2 The various groups of UI widgets available in the Sencha Touch framework
Group Purpose
Containers Widgets that are designed for nothing more than managing other child items. An example
of these types of widgets is the Tab panel. Containers typically implement layouts.
Sheets Sheets are generally any popup or side-anchored container and appear in a modal fash-
ion, requiring users to interact with the sheet before moving forward. An example of a
sheet is the Date Picker widget.
Views Views are widgets that implement data stores to display data. The List and Nested List
are both views that implement Stores.
Misc This collection of widgets ranges from Buttons to Maps to Media.

1.3.2 Controlling your UI with the Tab panel
The Tab panel (figure 1.5) is a container that automatically sets a top-docked or bottom-
docked toolbar for you with automatically generated buttons for every child item. Tap-
ping any of the buttons allows you to “flip” through items known as “cards.”
In figure 1.5 we’ve configured a Tab panel that implements a “slide” transition
with two child panels. By selecting Panel 2 in the toolbar Sencha Touch automatically
applies the CSS3 transition properties to both child panel elements, allowing for a
smooth transition from one panel to another.
The Tab panel does an excellent job of managing the display of items in your
screen, but sooner or later you’ll need the ability to accept data input from your users.
For that you’ll use the Form panel.
1.3.3 Accepting input with the Form panel
The Form panel is a container that’s typically used to display any of the input fields
that Sencha Touch provides and is automatically scrollable. Your fields can be
grouped via the FieldSet widget. Figure 1.6 shows an example of a Form panel requir-
ing user input.
In figure 1.6 we have most of the input fields that Sencha Touch offers, with the
exception of the Hidden field. With Sencha Touch the Text, Checkbox, URL, Email,
Left-docked
List
Container body
Top-docked
Toolbar
Bottom-docked
Toolbar
Figure 1.4 A demonstration of some of the
panel content areas

11
The Sencha Touch UI
Figure 1.5 The Tab panel allows you to configure UIs that can be changed by a tap of a button and
includes optional transition animations (from left to right).
Checkbox
DatePicker
Select
Toggle field
Text field
Slider
URL field
Email field
Textarea
Password
Spinner
Number field
Radio field
Figure 1.6 Form panels are used to display input fields and contain necessary controls to manage the
submission of data to your server.

Textarea, Number, Password, and Radio fields all implement native HTML5 input ele-
ments, with the addition of styling. Each of these, except for the Radio and Checkbox
fields, will force the native slide-in keyboard to appear when focused, allowing users to
enter data into the fields.
The Checkbox and Radio fields work similarly to their native web counterparts,
except that they’re stylized via Sencha Touch’s own check icon to mimic native appli-
cation behavior. In this example the Role checkboxes, grouped in a Fieldset, are
Radio fields, allowing only one selection in the set.
Next the Spinner field is a custom-styled input field, allowing users to enter
numeric values, much like the Number field, with the addition of easy-to-use decre-
ment and increment buttons on each side of the field.
The Slider field implements native Sencha Touch Draggable and Droppable classes,
allowing users to input a numeric value, via swipe and tap gestures. The Toggle field
extends Slider, allowing users to toggle a field of two values via swipe and tap gestures,
much like an on/off toggle switch that you see in various physical devices.
Lastly, the Date Picker and Select fields give your
users the ability to choose data from a set. The Date
Picker field implements what’s known as a sheet, which
is an overlay panel that slides in from the bottom allow-
ing the user to select values via vertical swipe or “flick”
gestures. Figure 1.7 shows an example of a date picker
displayed on an iPhone.
No matter what the device or its orientation the
Date Picker field will always display a sheet forcing
selection through this modal overlay. The Date Picker
widget may seem familiar to you because it mimics the
native iOS Date Picker input widget.
The Select field will display different input wid-
gets based on the device. Figure 1.8 shows our imple-
mentation of the Select widget on a phone and on a
tablet device.
On the left in figure 1.8 the Select widget is display-
ing a Picker sheet because Sencha Touch detected that
it’s running inside of a phone versus a tablet (right).
The difference is that iOS tablets natively display dialog
controls for selection.
As you’ve just seen, Sencha Touch offers quite a few
wrapped native HTML5 input fields as well as a few cus-
tom widgets. Because we’ve been talking about the Date Picker and Select fields
implementing sheets let’s look at the various Pickers and Sheets that Sencha Touch
offers, outside of the Form panel.
Figure 1.7 The Date picker
slider in action

13
The Sencha Touch UI
1.3.4 Sheets and pickers
We’ve already seen the Date picker and Picker classes
implemented via their associated form input widgets.
Sencha Touch provides you with a widget called a
sheet, which is a floating modal panel that animates
into view, grabbing the user’s attention and focus. Fig-
ure 1.9 shows a sheet in action.
In figure 1.9 you can see a sheet with top- and bot-
tom-docked toolbars, managing a scrollable List view.
You can configure such a UI because Sheet is a subclass
of Panel and includes all of the UI goodness that Panel
provides.
What’s neat about the Sheet widget is that it’s orien-
tation-aware. This means that flipping the device while
the application code is executing immediately causes
the sheet to render in landscape mode, as illustrated in
figure 1.10.
The story about Sheet doesn’t end here. It has three
subclasses: ActionSheet, MessageBox, and Picker. You’ve
already seen Picker and its subclass, Date picker, but
you haven’t seen ActionSheet and MessageBox.
We’re throwing a lot of new names at you, so to help
with any confusion see the simple inheritance model
diagram (figure 1.11).
Out of the box the ActionSheet widget allows you to easily render buttons in a sheet,
rendered in a vertical stack. Because ActionSheet is a subclass of Sheet, which extends
Panel, you can add pretty much anything you want to the stack of widgets. Figure 1.12
shows an example of an ActionSheet widget rendered with a custom HTML title.
Figure 1.8 The Select
field will display a different
input widget based on the
type of device that’s
running your UI.
Figure 1.9 A generic sheet in
action displayed in portrait mode

Such an ActionSheet could be used to request action
from users, requiring that they choose an action via
one of the buttons. In this case you’re asking the user
to choose one of three options, and with the custom
title you’re providing a hint along with the actionable
button set.
MessageBox is a subclass of Sheet that provides Sen-
cha Touch–styled alert-like functionality to your appli-
cations. Figure 1.13 illustrates the three most common
uses of MessageBox, including alert (top left), confirm
(bottom left), and prompt (top right). Each of these
dialogs appears with smooth CSS3 transitions and mim-
ics their native counterparts.
The key differences among the three are apparent.
The alert MessageBox widget is designed to alert the
user of some condition and only displays one button.
The confirm dialog allows the user to make a decision
by tapping on a button, enabling a branch of logic to
execute. Lastly, the MessageBox prompt asks the user
for direct input.
You’ve seen all that Sheet and its subclasses have to
offer. Next let’s look at the various data-bound views
that Sencha Touch provides.
Figure 1.10 A generic Sheet
widget displayed in landscape
mode
Picker
Date
Sheet
MessageBox ActionSheet
Panel
Figure 1.11 The Sheet inheritance model
Figure 1.12 An ActionSheet
displayed in an application

15
The Sencha Touch UI
1.3.5 Data-bound views
If you’re an Ext JS developer you might be surprised to learn that Sencha Touch only
provides three data-bound views and that this list excludes a GridPanel. At your dis-
posal you have Data View, List, and NestedList. We’ll begin with the most basic, Data
View, and work our way to the most complex.
Data View is a widget that binds to a data store to render data on screen. It gives
you 100% control over how you’ll render your data. Figure 1.14 is an example of a
simple Data View widget displaying a set of names, beginning with the last name.
Here we have a stylized Data View widget rendering data from a data store, which
contains a list of names. This example rendered only names to keep it simple but you
can use Data Views to render anything imaginable and to allow for user interaction.
Figure 1.13 The common
MessageBox implementations:
alert (top left), confirm (bottom
left), and prompt (right)
Figure 1.14 A stylized Data
View widget with an “itemtap”
event handler, displaying an
action sheet based on selection

With the Data View widget you’re completely responsible for a lot of work, including
defining the XTemplate that’ll be used to stamp out the HTML fragments, as well as
styling how the items are rendered on screen. If you’re like us and want the look and
feel of a native list the List class is at your disposal. Figure 1.15 shows a List widget, ren-
dering the exact same data as in the previous example.
The difference between this example and the previous one should be clear. What’s
not as obvious is that the level of effort required to create this List view is orders of
magnitude less than creating the earlier Data view. You’ll see what we mean by this in
chapter 6, when we tackle List views head on.
In addition to allowing for a native application look and feel the List view has three
more key features, shown in figure 1.16.
With a few minor tweaks you’re able to transform a simple List view into a
grouped List view. The grouped list in figure 1.16 has what’s known as a grouping
bar, which is a separator between items in the list. The Sencha team has been able
to get this list to work nearly identically to native grouped lists, and it includes
optional disclosure icons, as well as an index bar for fast searching with a single fin-
ger swipe.
The Data View and List widgets are designed to display data in a linear set. But
there are times when you want to display nested data. For that you’ll need to use the
NestedList widget, shown in figure 1.17.
In figure 1.17 we’ve set up a NestedList for the selection of a food item. There are
two main categories: Drinks and Food (left). We chose “Drinks,” which brought us to
three subcategories (center). We then chose “Sports Drinks,” which led us to the last
Figure 1.15 A simple List View
with an action sheet

17
The Sencha Touch UI
Grouping bar
Index bar
Disclosure icon
Figure 1.16 A grouped List view, sporting
an index bar
Figure 1.17 A NestedList widget in action used in a navigational manner

section of items, which is a list of specific sports drinks (right). All of this is done with
the slide animation.
You’ve just explored the Data View, List, and NestedList widgets. Next let’s exam-
ine the Map and Media widgets.
1.3.6 Maps and Media
With the rapid-expansion world of mobile applica-
tions integrating maps into your applications can
provide a huge boost in productivity for your users.
To meet this growing demand Sencha Touch inte-
grates Google Maps to supercharge your location-
aware applications. Figure 1.18 shows the Sencha
Touch Map widget in action.
The Sencha Touch Map widget literally wraps
Google Maps, allowing your application code to
manage the Google Maps instance as if it was native
to Sencha Touch. This means that the Map widget
can take part in layouts and has normalized events,
as well as an interface method to easily update the
map’s coordinates.
Another growing demand for mobile applica-
tions is the ability to play audio and video content.
HTML5 natively has video and audio tags that bring
this functionality to Mobile Safari but Sencha Touch
makes it easier to use. Figure 1.19 shows the Media
widget displaying a video on a tablet.
Just like the Map widget, the Media widget uses
familiar interface methods, and it’s easily configu-
rable to play audio and video in your applications.
We’ve just completed our UI walkthrough. Before
we wrap up this chapter we want to talk about thinking like a mobile developer. This
conversation will be especially helpful to you if this is your first dive into the world of
mobile application development. We know you’re itching to get down to coding so we
won’t hold you very long.
1.4 Thinking like a mobile developer
If you’re like us you’re making the transition from Ext JS to Sencha Touch. Making
the transition to mobile from desktop application development poses thought-
process challenges that must be overcome if you plan to build successful apps.
Here are some points you need to think about before moving forward with your
application development.
Figure 1.18 The Sencha Touch
Map widget in portrait mode

19
Thinking like a mobile developer
1.4.1 Think lightweight
When spec’ing out or developing your mobile app you must think “lightweight” or
your app is destined to run into performance issues. If you’ve made the transfor-
mation from a native desktop application developer to a desktop-web application
developer it’s likely that you’ve encountered this issue during your transition,
because native desktop applications can handle much more of a burden than
desktop-web applications.
Due to the reduced computing power of mobile devices the mobile browser is lim-
ited in many ways when compared to its desktop counterpart. This is why thinking
“lightweight” is paramount for a successful application.
Our suggestion is to try to reduce the amount of data as well as the complexity of
the screen size as much as possible. Reducing the user interaction models is also a plus
since complex user interaction models bog down mobile-web applications.
1.4.2 Remember—it’s a browser!
Many developers are tasked with converting native applications to Sencha Touch–
powered web applications. Often during the conversion process they experience per-
formance issues, and Sencha Touch is blamed.
Figure 1.19 A panel wrapping a Media widget to play video on a tablet

It’s during these times that we tell developers caught in this cycle to remember that
the application they’re developing is running inside of a browser and thus has limited
power relative to native-compiled mobile applications. Just as native desktop applica-
tions can handle more difficult tasks than desktop-web applications, native mobile
apps have more muscle than mobile-web applications.
We believe that entering the conversion process with this in mind helps you set
realistic expectations with your customers.
1.4.3 Throw away what you don’t need
With the reduced power of mobile devices comes an increase of responsibility to keep
things as clean as possible and reduce DOM clutter and bloat. For desktop-web appli-
cations this isn’t as critical, but for mobile web it’s extremely critical.
This means that when placing items such as ActionSheets in the Document Object
Model (DOM) you must take care to destroy them when they are no longer needed.
DOM bloat is the enemy of performance.
Sencha Touch widgets come with a complete three-phase lifecycle, allowing you to
easily destroy components, thus removing items from the DOM and freeing up cru-
cial resources.
Along with the destruction of items that are no longer needed you should only
instantiate what’s needed. We often find hugely nested components being instanti-
ated when only a single component is needed for a particular action. To keep things
safe think conservatively.
1.4.4 “finger” !== “mouse”
Part of transitioning to mobile development involves understanding the user
interaction models and how they relate to browser events. Table 1.3 describes
some of the most common user gestures, alongside their desktop counterparts
(when applicable).
Mobile Safari will crash
Mobile Safari will crash if your application causes it to run out of memory. This will
simply cause the application to disappear from the user without warning.
Table 1.3 Comparing touch gesture events with desktop mouse gesture events
Mobile Desktop Description
touchstart mousedown The initial point at which a touch is detected in the UI.
touchend mouseup Signals the end of a touchstart event.
tap click A tapstart and tapend event for a single target.

21
Summary
Always test all of your complex interaction models with the physical platforms that
you’re targeting for your applications. It’s only then that you can truly see how they’ll
react during events like pinch, swipe, and drag.
1.4.5 Reduce the data
When developing your applications you have to remember to reduce the amount of
data you’re sending to the browser. If you find yourself pushing megabytes of data to
the server for a single Ajax request reconsider your approach.
Along these lines, also aim for a reduction in data complexity. Remember that
these devices are relatively low-powered and any time spent manipulating complex
data could be spent allowing the user to interact with the application. Tasking your
mobile application to deal with deeply nested and complicated data structures is
highly discouraged.
Through your application development iterations we suggest placing yourself in the
shoes of your end user. Remember, mobile applications should be quick and responsive.
1.5 Summary
We covered quite a bit in this first chapter, beginning with a high-level discussion
about what Sencha Touch is and the problems that it aims to solve for the mobile-web
application space.
You then took a deep dive into the world of the Sencha Touch UI widget set and
learned about what’s offered out of the box. You explored some of the differences
between widgets, such as the Data View and List view.
doubletap doubleclick Two successive tapstart and tapends for a single target.
swipe A tapstart and tapend event with a delta in X (horizontal) or
Y (vertical) coordinates.
pinch A complex multifinger “pinch” gesture. It consists of multiple
touchstart and touchend events with deltas in the X and Y coordi-
nate space.
Server-side developers will have to work harder
Often deeply nested data structures are passed to clients because of the amount of
work involved for the server-side developers to reduce complexity. We’d much rather
have our server-side developers work harder than impact the performance of the client
and thus avoid a negative view of our mobile applications.
Table 1.3 Comparing touch gesture events with desktop mouse gesture events (continued)
Mobile Desktop Description

Finally, you learned how you should think about mobile applications and some of
the limitations that mobile devices pose.
In the next chapter we’ll begin our deep dive into Sencha Touch, beginning with
where to get the framework, and then we’ll inspect its contents. After you’ve become
familiar with setting up a basic Sencha Touch app page you’ll develop a quick applica-
tion with the framework.

23
Using Sencha Touch
for the first time
In the previous chapter you looked at what Sencha Touch provides developers.
That chapter effectively set the stage for you to begin using the framework, and
that’s precisely what you’ll be doing next.
In this chapter you’ll begin to understand how pieces of Sencha Touch work
and fit together as you start to develop an application using critical pieces of the
framework such as the class Loader. Because this is an introductory chapter we
won’t be going into too much detail about how things operate. We’ll go into more
detail starting with chapter 3.
2.1 License considerations
To get a copy of the Sencha Touch framework you’ll need to visit http:/
/sencha.com/
products/touch/download/. You’ll be greeted with a page like the one in figure 2.1.
This chapter covers
■ Downloading Sencha Touch
■ Exploring the package contents
■ Creating a “Hello World” example
■ Developing an application

24 CHAPTER 2 Using Sencha Touch for the first time
From here you’re required to make a decision about which license you’re going to
use. In case you’re not sure which version to choose we’ve detailed a few scenarios in
table 2.1.
If you’re still unsure which license to choose you can consult the Sencha licensing
page at http:/
/sencha.com/products/touch/license or email the Sencha license sup-
port team at licensing@sencha.com.
Now that we’ve gotten the hairy licensing issue out of the way we can begin to look
at the package contents of the framework.
2.2 Unpacking the framework
The Sencha Touch framework comes to you via a zip file which you must unpack in
order to use the library. Figure 2.2 shows what you can expect to find in the zip file
you downloaded.
The zip package inflates to a directory that is just over 270 MB. If you’re wondering if
all of the package contents are required to deploy with your application, the answer is no.
Table 2.1 Choosing a license model for Sencha Touch
License Type Reason
Open Source Your project will be available for anyone to download and modify according to the GNU
GPL license v3. FLOSS (Free/Libre and Open Source) exceptions are available.
Commercial You’re creating an application that you plan on selling or distributing and aren’t willing
to permit direct access to your source. If you plan on packaging your product to offer in
an app store this is the license you want to go with.
Click for a
commercial
version
Click for the
open source
version
Figure 2.1 You must make a decision about which version of Sencha Touch you’re going to download.

25
Unpacking the framework
The good news is that most of the space used in the package goes to docs, exam-
ples, and other goodies that you typically don’t and shouldn’t deploy with your
applications. See table 2.2 for a description of each of the items in the archive that
you just extracted.
What you have may look a bit different
As of this writing we’re covering Sencha Touch 2.2. It’s known that the SDK contents
change a bit from version to version.
Table 2.2 The various files in the Sencha Touch package
Item(s) Purpose
builds/ This directory contains the sencha-touch-compat.js file, which contains the code
you’d use if you wanted to run your app with backward-compatible 1.0 code. Don’t
depend on this version of the framework for your application code; we suggest
migrating to 2.0 as quickly as possible.
cmd/ This directory contains necessary files for the Sencha Cmd toolset, which is like a
Swiss army knife of the Sencha Touch 2 development world. We won’t be diving
into Cmd until we talk about advanced topics in chapter 11.
docs/ The docs directory is where you’ll be able to view the framework documentation
without the need to go online. This directory itself is over 139 MB in size.
examples/ This folder contains all of the one-off examples as well as a few example applica-
tions. This folder is also responsible for the hefty weight of the unzipped pack-
age—it’s over 113 MB in size.
Figure 2.2 Looking at the package
contents

Another Random Document on
Scribd Without Any Related Topics

Mr. Stern. And are you certain in your own mind that they did
not come from the overpass?
Mr. Sorrels. Positive.
Mr. Stern. Do you have any reason to believe that the shots
could not have come from the Book Depository Building?
Mr. Sorrels. No, sir.
Mr. Stern. Would shots from the Book Depository Building have
been consistent with your hearing of the shots?
Mr. Sorrels. Yes; they would have.
Mr. Stern. What happened next, Mr. Sorrels?
Mr. Sorrels. We proceeded to Parkland Hospital just as fast as we
could.
Mr. Stern. Did you go into the hospital?
Mr. Sorrels. No; I did not go into the hospital.
Of course the lead car was in front. We went around to the
emergency entrance. I jumped out of the car, and I expected to see
stretchers there, out waiting, but they were not. And I ran to the
entrance door there, and at that time they began to bring stretchers
out, and I said, "Hurry up and get those stretchers out," and
someone else, probably one of the police officers, also said to hurry
up and get the stretchers out.
There was a lot of confusion around at that time.
And they did get the stretchers out. And then Mr. Johnson—they
brought him into the hospital, he rushed into the hospital. And they
took Mr. Connally in, loaded him first, and then the President, and
just as quick as they got in there, I immediately went into a police
car that was leaving and asked them to take me to the building as
fast as they could, and when I said the building I meant the one on
the corner there, which was the Book Depository.
Mr. Stern. Why did you designate the Book Depository?

Mr. Sorrels. Because I wanted to get there and get something
going in establishing who the people were that were in that vicinity.
And upon arrival at the Book Store, we pulled up on the side, and I
went in the back door.
Mr. Stern. Just a minute. Had you heard any mention of the Book
Depository on police broadcasts as you drove to the hospital?
Mr. Sorrels. No; I never heard anything.
Mr. Stern. And, at this point, you were not certain that the shots
came from the Book Depository?
Mr. Sorrels. No; I didn't know at that time.
Mr. Stern. You just wanted to get to that general area?
Mr. Sorrels. Yes, sir; because I knew that there would be
witnesses around there, there would have to be somebody in that
vicinity.
And upon arrival at the Book Depository, I went in the back door.
There were people moving around.
I asked, "Where is the manager here?"
Mr. Stern. Just a minute.
How much time do you think elapsed from the time the shots
were fired until the time you returned to the Book Depository?
Mr. Sorrels. I don't believe it could have been over about 20
minutes, because we went to the hospital just as fast as we possibly
could, and I wasn't there very long.
And we came back as fast as we could.
Of course we didn't get back as fast as we went out there,
because traffic was moving.
The other way it was just cleared out to the Trade Mart. We had
clear sailing from the time that the shots were fired until we got to

the Trade Mart, because that was the route that we were going to
go anyway. And that was cleared out.
But coming back, of course, there was traffic. We did come back
under lights and siren, as fast as we could.
But there was traffic that slowed us up some.
Mr. Stern. So you estimate not more than 20 minutes?
Mr. Sorrels. I don't believe it could have been more than 20 or
25 minutes at the very most.
Mr. Stern. Then you arrived at the Book Depository Building, and
did you see any police officers outside the building?
Mr. Sorrels. Yes; there were officers. I recall seeing officers. I
could not say any specific one.
Now, as I came into the back of the building, there was a
colored man standing on the rear platform, a loading platform. And
he was just standing there looking off into the distance. I don't think
he knew what happened.
And I said to him, "Did you see anyone run out the back?"
He said, "No, sir."
Did you see anyone leave the back way?
No, sir.
Mr. Stern. Did you get his name?
Mr. Sorrels. No, sir; I did not. I did not stop to do that, because I
figured he was an employee of the building.
I went on the inside of the building and asked someone for the
manager and they pointed to Mr. Truly.
I identified myself to Mr. Truly.
Mr. Stern. Just a minute.

Did you establish how long that man had been on the loading
platform?
Mr. Sorrels. No, sir; I did not.
Mr. Stern. There was no policeman stationed at the loading
platform when you came up?
Mr. Sorrels. I did not see one; no, sir.
Mr. Stern. And you were able to enter the building without
identifying yourself?
Mr. Sorrels. Yes, sir.
Mr. Stern. Then you got inside the building and what did you do?
Mr. Sorrels. I asked for the manager, and I was directed to Mr.
Truly. He was standing there.
I went up and identified myself to him. I said, "I want to get a
stenographer, and we would like to have you put down the names
and addresses of every employee of the building, in the building."
And I then walked on out the front door and asked, "Did anyone
here see anything?"
And someone pointed to Mr. Brennan.
Mr. Stern. What was your purpose in asking for a list of the
employees of the building?
Mr. Sorrels. Because I knew that they would have to be
interviewed. I was trying to establish at that time without any delay,
who all was in that building or was employed there, because I knew
they would have to be talked to later.
In other words, I was looking for someone that saw something.
Mr. Stern. You were looking for potential witnesses?
Mr. Stern. And at that time you had no basis for suspecting any
employee might be involved one way or the other?

Mr. Sorrels. No, sir; and I did not know at that time that the
shots came from the building.
When I was—when Mr. Brennan was pointed out to me, I went
up and told him who I was and asked him if he saw anything. And
he told me what he had seen. And, at that time, that is the first time
that I knew definitely that any shots had come from the building.
Mr. Stern. Now, what precisely did Mr. Brennan tell you?
Mr. Sorrels. Mr. Brennan said that he was standing across the
street, watching the parade, and that he, of course, was looking in
the direction where the President was, and he heard a sound which
he thought at first was a backfire of an automobile. And that shortly
afterwards there was another sound, and that he thought that
somebody might be throwing firecrackers out of the building.
And he glanced up to the building, and that he saw a man at the
window on the right-hand side, the second floor from the top.
And he said, "I could see the man taking deliberate aim and saw
him fire the third shot," and said then he just pulled the rifle back in
and moved back from the window, just as unconcerned as could be.
Mr. Stern. How did you happen to talk to Mr. Brennan?
Mr. Sorrels. I asked—I don't know who, someone there—"Is
there anyone here that saw anything?" And someone said, "That
man over there."
He was out in front of the building and I went right to him.
Mr. Stern. Did Mr. Brennan tell you anything else?
Mr. Sorrels. I asked him whether or not he thought he could
identify the person that he saw, and he, of course, gave me a
description of him, said that he appeared to be a slender man, he
had on what appeared to be a light jacket or shirt or something to
that effect, and that he thought he could identify him—said he was
slender build. Because I was definitely interested in someone that
had seen something that could give us some definite information.

And I also asked if he had seen anybody else, and he pointed to
a young colored boy there, by the name of Euins. And I got him and
Mr. Brennan, and I took them over to the sheriff's office where we
could get statements from them.
Mr. Stern. What was the name of that young man?
Mr. Sorrels. Euins, I believe it is, or pretty close to that.
Mr. Stern. Did you interview Mr. Euins?
Mr. Sorrels. Yes, sir; I did. And he also said that he had heard
the noise there, and that he had looked up and saw the man at the
window with the rifle, and I asked him if he could identify the
person, and he said, no, he couldn't, he said he couldn't tell whether
he was colored or white.
Mr. Stern. Do you remember anything unusual about the way Mr.
Brennan was dressed?
Mr. Sorrels. He was dressed as a workman, or a laborer, and he
had on a hard hat.
Mr. Stern. Construction hat?
Mr. Stern. Did Mr. Brennan tell you anything else about anything
else he had observed at that time?
Mr. Sorrels. I can't recall any specific thing.
Mr. Stern. Did he mention seeing any other person or persons in
the windows of the Book Depository Building?
Mr. Sorrels. I don't recall whether he did or did not.
Mr. Stern. Did he say anything about observing anyone leave the
Book Depository Building hurriedly after the shooting?
Mr. Stern. Did he point out to you precisely the window from
which he said he saw the shot fired, the window in which he saw the

sniper?
Mr. Stern. Where was that window in relation to the windows at
which you saw several Negro men as you drove on Houston Street?
Mr. Sorrels. It was one floor above and a little bit to the right, as
I recall it.
Mr. Stern. Can you give us these directions in terms of compass
points?
Mr. Sorrels. Yes. That would be on the east side of the building.
Mr. Stern. So the window that Mr. Brennan pointed out to you
was on the extreme east side?
Mr. Stern. And the window or windows at which you had
observed several Negro men was more to the west?
Mr. Sorrels. A little bit more to the west—not very much—but to
the west, on the floor below.
Mr. Stern. Are you certain in your mind about the floor below?
Mr. Sorrels. Yes, I am.
Mr. Stern. Is there any particular reason for that? You said before
that you essentially glanced at the building, and didn't have very
long to observe it, and you saw these men at the window.
What makes you certain about placing the men on any particular
floor?
Mr. Sorrels. Well, because I remember that they were not near
the top—I can just remember that—it seemed to me like two floors
down from the top, as I recall having seen them. And, of course,
when I got back to the building down there, there were windows
open on the floor below at the place where I recall having seen the
colored men.

Mr. Stern. So it was the open window afterwards that helped you
recall?
Mr. Sorrels. That is right.
Mr. Stern. And are you certain that those were the same open
windows?
Mr. Sorrels. Yes, I think they were. I don't have any reason to
think otherwise.
Mr. Stern. Then you accompanied Brennan and Euins where?
Mr. Sorrels. To the sheriff's office, which was right across the
street from the Book Depository.
Mr. Stern. Did you have any further conversation with them on
the way over there?
Mr. Sorrels. Oh, yes; we discussed—I was talking to him on the
way over there about what they saw and observed, and told them
we would like to come in there where we could get their statements
down in writing.
Mr. Stern. Did they tell you anything that you have not already
told us?
Mr. Sorrels. Not that I recall.
The little colored boy mentioned he was there with another
colored boy that ran off when this thing happened—at the first shot
this boy ran off. He said he stayed there, but the other boy ran off. I
didn't make any effort to get in touch with him, because he
apparently saw nothing.
Mr. Stern. Then you took them into the sheriff's office?
Mr. Stern. What was going on in the sheriff's office?
Mr. Sorrels. At that time one of the deputy sheriffs was in the
interrogation room taking a statement from some witness there. And
I did not want to just stay there and wait too long, so I asked him

would he also write up the statements on it—Mr. Brennan and the
colored boy. And I then started out in the hall of the sheriff's office
there with the idea of going back to see if I could locate other
witnesses, when Chief Deputy Sheriff Mr. Allan Sweatt told me there
was another witness across the hallway, near Mr. Sweatt's office—he
is the polygraph operator there, and his office is not in the same
area as the sheriff's office but across the hall—that there was an FBI
agent taking a statement over there from a person.
So I accompanied him over there and hadn't been in there but
just a few minutes until Mr. Sweatt came and called me out and says
"Forrest, there are some people here I think you ought to talk to."
Mr. Stern. Whose statement was being taken by the FBI?
Mr. Sorrels. I don't recall. And, at that time——
Mr. Stern. Do you recall what their statement was—what their
testimony was?
Mr. Sorrels. No, I don't, because I wasn't in there but just a very
short time. And this FBI agent was questioning about what they had
seen and so forth. I don't recall—it was being taken down at the
time.
So I went out, and they had Mr. and Mrs. Arnold there. And Mr.
Arnold, a young man, and his wife, very young, said that they were
standing on the side of the street on Houston Street, there by the
courthouse building, and that they—this is prior to the time of the
arrival of the President there, some 20 to 25 minutes beforehand, he
said.
Mr. Stern. This is the east side?
Mr. Sorrels. That would be the east side of Houston Street.
Mr. Stern. Are you certain about the name of this couple? I
believe you said Arnold.
Mr. Sorrels. Well——
Mr. Stern. Could that have been his first name?

Mr. Sorrels. Yes, that could have been his first name.
Mr. Stern. Can you recall his second name?
Mr. Sorrels. I would know it if I heard it.
Mr. Stern. Could it have been Roland?
Mr. Sorrels. Yes, Roland is right.
Mr. Stern. What did they tell you?
Mr. Sorrels. He said that they were standing there waiting for the
President to come by, and they were talking about security. And he
said that right after that, that he looked up at this building over
there, which is the Book Depository, and that there were a couple of
windows open towards the west side, and that he saw a man
standing in there with what appeared to be a rifle with a telescopic
sight.
Mr. Stern. Towards the west side?
Mr. Sorrels. Yes—two windows towards the west side.
And that he remarked to his wife, "I guess that is a Secret
Service man."
And I asked her if she saw it, and she said, no, that she had left
her glasses home, and she is nearsighted, and she could not see
him. And, of course, I asked him the description of the man. I asked
him "How could you determine—what made you think it had a
telescopic sight on it?"
He said, "Well, it seemed like it was wider on the light
background."
I said, "How was he holding it?"
He said, port arms—he was standing several feet back away
from the window.
And I asked him, "Could you identify that man?"
He said, "No, I could not."

Mr. Stern. Did Mrs. Roland confirm that he had discussed this
with her?
Mr. Sorrels. She confirmed the conversation, but she said she
could not see anything, because she didn't have her glasses.
Mr. Stern. Did Mr. Roland tell you he had seen anyone else in the
windows of the Book Depository Building?
Mr. Sorrels. I don't recall that he did. I don't recall that at all. He
may have, but I don't recall that.
Mr. Stern. Did he mention anyone on the sixth floor, and
particularly on the extreme east side of the sixth floor?
Mr. Sorrels. No, I don't recall that he mentioned anyone there.
Mr. Stern. What was your impression of what he told you?
Mr. Sorrels. Well, of course, the thing that hit me first thing is
why—he was right there by the sheriff's office, if he had just gone in
there and said, Look, I saw a man with a rifle over there.
I said, "Why didn't you say something to somebody about it?"
He said, "I just thought he was a Secret Service man."
And at that time he appeared to be, as far as I was concerned,
truthful about the matter.
Mr. Stern. You didn't have any reason to doubt him?
Mr. Sorrels. No.
Mr. Stern. And would the same be true of what Mr. Brennan told
you, and Euins?
Mr. Stern. Did you look towards the window that Roland had
pointed out from the spot at which he said he was standing, to see
whether it was possible to observe from there someone standing
several feet back from the window? Did you have occasion to check
that?

Mr. Sorrels. Well, no, not specifically.
Later on I heard that he had—I believe in his statement that he
wrote up down there at the sheriff's office, something about 15 feet
back. And I thought to myself, well, I don't think you could see
anybody that far back.
Mr. Stern. But he didn't tell you that?
Mr. Sorrels. No, he just said he was standing back of the window
there, just kind of looking around there. He said after he saw him
there, he didn't pay any more attention, because he just thought it
was a Secret Service man.
Mr. Stern. What happened next?
Mr. Sorrels. There was another witness there that I started
talking to—I don't recall the name now, because I told him to go in
—somebody that saw a truck down there—this is before the parade
ever got there—that apparently had stalled down there on Elm
Street. And I later checked on that, and found out that the car had
gone dead, apparently belonged to some construction company, and
that a police officer had come down there, and they had gone to the
construction company and gotten somebody to come down and get
the car out of the way.
Apparently it was just a car stalled down there.
But this lady said she thought she saw somebody that looked
like they had a guncase. But then I didn't pursue that any further—
because then I had gotten the information that the rifle had been
found in the building and shells and so forth.
At that time Mr. Harry McCormack, who is a reporter for the
Dallas Morning News, and whom I have known for many years,
came to me and says, "Forrest, I have something over here you
ought to know about."
I said, "What have you got here?"

He said, "I have a man over here that got pictures of this whole
thing."
I said, "Let's go see him."
So we went on to a building at the corner of Elm and Houston,
on the east side of Houston, and across the street from the court
house building there, and up to the office of a Mr. Zapruder, they
have a dress manufacturing place there in that building. And he was
there with another man connected with the business there, and
apparently some magazine representatives there. And Mr. Zapruder
was real shook up. He said that he didn't know how in the world he
had taken these pictures, that he was down there and was taking
the thing there, and he says, "My God, I saw the whole thing. I saw
the man's brains come out of his head."
And so I asked Mr. Zapruder would it be possible for us to get a
copy of those films.
He said, yes.
So then accompanied by Mr. Zapruder, and this other gentleman
in the business there with him, whose name I don't recall at the
moment, and Mr. McCormack, we went then to the Dallas Morning
News Building, which is about three blocks from Mr. Zapruder's
building, three or four blocks from there, with the idea of getting
those films developed right away.
There was no one there that would tackle the job. We then went
to the television section, WFAA, of the Dallas Morning News, to see
if we could get them to handle it there, and they said, no, they
would not attempt to do that, but they did assist us by calling
Eastman Kodak Co., and they said if we came out there right away,
that they would get right on it.

We got a police car, and went right on out to the Eastman Kodak
Co., and while there I met another gentleman who had seen some
still pictures, and I arranged with him for us to get copies of those.
Mr. Stern. What was his name—do you recall?
Mr. Sorrels. He is a salesman for the Ford Co. on West
Commerce Street—Mr. Willis.
And so he said, yes, that he would be glad to furnish me with a
copy of the pictures.
At that time, I made a phone call to my office, because I had not
been in contact with them since we had departed from Love Field. I
was informed that an FBI agent had called the office and said that
Captain Fritz of the Homicide Bureau had been trying to get in touch
with me, that he had a suspect in custody.
Mr. Stern. About what time was that?
Mr. Sorrels. That would be fairly close to 2 o'clock, I imagine.
Mr. Stern. About an hour after you had returned——
Mr. Sorrels. Yes. I would say that it was at least that long—
maybe a little bit longer.
So when I got that information, I told Mr. Zapruder that I would
contact him later and get the pictures, because I wanted to get right
down to Captain Fritz' office.
So I left then with the same police car and had them take me to
Captain Fritz' office.
And upon arrival there, there was many officers around there,
there was already cameras out in the hall, tripods, and so forth, and
all of the city hall down there. And there was a number of officers in
the detective bureau office there, and Captain Fritz' office, which is
an office within the large office, was closed, and the blinds were
drawn in his office there.

I did not knock on the door or anything, because I did not want
to interfere with him if he was talking to someone. So I just waited
there until Captain Fritz opened the door, and he had a man who I
later found out to be Oswald in custody at the time.
And I told Captain Fritz, I said, "Captain, I would like to talk to
this man when I have an opportunity."
He said, "You can talk to him right now."
And he just took him on back around to the side of Captain Fritz'
office, and there was a number of other officers there, might have
been some FBI agents, too, there, because there were numbers of
FBI agents around in that vicinity almost all the time from that time
on. And some of the detectives there.
And I started talking to Oswald, started asking him some
questions, and he was arrogant and a belligerent attitude about him.
And he said to me, "I don't know who you fellows are, a bunch
of cops."
And I said, "Well, I will tell you who I am. My name is Sorrels
and I am with the United States Secret Service, and here is my
commission book."
I held it out in front of him and he said, "I don't want to look at
it."
And he held his head up and wouldn't look at it at all. And he
said, "What am I going to be charged with? Why am I being held
here? Isn't someone supposed to tell me what my rights are?"
I said, "Yes, I will tell you what your rights are. Your rights are
the same as that of any American citizen. You do not have to make a
statement unless you want to. You have the right to get an
attorney."
Aren't you supposed to get me an attorney?
No, I am not supposed to get you an attorney.

Aren't you supposed to get me an attorney?
I said, "No, I am not supposed to get you an attorney, because if
I got you an attorney, they would say I was probably getting a
rakeoff on the fee," or words to that effect, and kind of smiled and
tried to break the ice a little bit there.
I said, "You can have the telephone book and you can call
anybody you want to."
I said, "I just want to ask you some questions. I am in on this
investigation. I just want to ask you some questions."
Mr. Stern. Was there anything further said about an attorney?
Mr. Sorrels. Not that I recall at that time. I don't recall anything
further said about an attorney. I asked him where he worked. He
told me worked at this Book Depository. And as I recall it, I asked
him what his address was, and where he was living, and he
explained to me that he was living apart from his wife, and that she
was living over in Irving, Tex. I asked him, as I recall it, what his
duties were at this Book Depository, and he said filling orders.
I asked him if he had occasion to be on more than one floor, and
he said, yes.
I asked him if he had occasion to be on the sixth floor of the
building. He said, yes, because they fill orders from all the floors.
But he said most of his activity was down on the first floor.
And I think I asked him whether or not he had ever been in a
foreign country, and he said that he had traveled in Europe, but
more time had been spent in the Soviet Union, as I recall it.
And then he just said "I don't care to answer any more
questions."
And so the conversation was terminated.
Mr. Stern. Did he give you his address?

Mr. Sorrels. As I recall it, he did give me an address. I don't
remember what it was offhand.
Mr. Stern. Then were you finished with your questions, or did he
refuse to answer any more?
Mr. Sorrels. He just said, "I don't care to answer any more
questions."
Mr. Stern. You wanted to ask him other questions?
Mr. Sorrels. Oh, yes.
Mr. Stern. And what happened then?
Mr. Sorrels. He was taken by the officers, as I recall it, and was
taken out of that area and I suppose put back in jail.
Mr. Stern. Did you then talk to Captain Fritz?
Mr. Sorrels. Yes. As I recall it, I asked Captain Fritz whether or
not he had gotten anything out of him or not, and Captain Fritz said
that he hadn't been able—that he had not made any admissions or
anything like that at that time, and that he was going to talk to him
again.
That is all I recall that transpired at that time.
Of course I contacted the Chief's office, when I got that
information as to who he was, and gave that information to them.
Mr. Stern. This is Chief Rowley?
Mr. Sorrels. I think I talked to Deputy Chief Paterni.
Mr. Stern. Of the Secret Service here in Washington?
Mr. Stern. Did anything else transpire between that time and the
Friday night showup?
Mr. Sorrels. I did not talk to Oswald again, and I was around
there. When I contacted Washington, I was informed that Inspector
Kelley was being directed to be there, and he would be there later

on that evening, that they had caught him out on the road, and he
would come there to help out.
I also got information to Captain Fritz that I had this witness,
Brennan, that I had talked to, and that I would like very much for
him to get a chance to see Oswald in a lineup. And Captain Fritz said
that would be fine.
So I instructed Special Agent Patterson, I believe it was, after I
had located Brennan—had quite a difficult time to locate him,
because he wasn't at home. And they finally prevailed upon his wife
to try to help me locate him, and she, as I recall it, said that she
would see if she could locate him by phone. I called her, I believe,
the second time and finally got a phone number and called him and
told him we would like for him to come down and arrange for him to
meet one of our agents to pick him up at the place there. And when
they came down there with him, I got ahold of Captain Fritz and told
him that the witness was there, Mr. Brennan.
He said, "I wish he would have been here a little sooner, we just
got through with a lineup. But we will get another fixed up."
So I took Mr. Brennan, and we went to the assembly room,
which is also where they have the lineup, and Mr. Brennan, upon
arrival at the police station, said, "I don't know if I can do you any
good or not, because I have seen the man that they have under
arrest on television," and he said, "I just don't know whether I can
identify him positively or not" because he said that the man on
television was a bit disheveled and his shirt was open or something
like that, and he said "The man I saw was not in that condition."
So when we got to the assembly room, Mr. Brennan said he
would like to get quite a ways back, because he would like to get as
close to the distance away from where he saw this man at the time
that the shooting took place as he could.
And I said, "Well, we will get you clear on to the back and then
we can move up forward."
They did bring Oswald in in a lineup.

He looked very carefully, and then we moved him up closer and
so forth, and he said, "I cannot positively say."
I said, "Well, is there anyone there that looks like him?"
He said, "Well, that second man from the left," who was Oswald
—"he looks like him."
Then he repeated that the man he saw was not disheveled.
Now, mind you, Oswald had a slight wound over here, and he
had a black eye, a bruised eye.
Mr. Stern. When you say "over here"——
Mr. Sorrels. Oh, on the left side. He had a mark on his forehead,
and his left eye was a bit puffed.
Mr. Stern. How many other people were in the lineup?
Mr. Sorrels. As I recall it, there were five. In other words, all told
there was five or six—I don't remember. I believe there were five.
Mr. Stern. Were the others reasonably similar to Oswald in height
and physical appearance, and color?
Mr. Sorrels. Yes.
Mr. Stern. Dress?
Mr. Sorrels. I noted that to me I thought it was a very fair lineup,
because they didn't have anyone that was a lot taller than he was,
or anyone a lot shorter. They didn't have any big fat ones or
anything like that.
In other words, to me it was a good lineup.
Mr. Stern. At that time, did Mr. Brennan say anything else to you
that you have not told us, or to anyone else?
Mr. Sorrels. Not that I recall. He says, "I am sorry, but I can't do
it. I was afraid seeing the television might have messed me up. I
just can't be positive. I am sorry."

Mr. Stern. As far as you know, had Mr. Brennan been interviewed
by anyone after he gave his statement to the deputy sheriff until the
time you had him brought to the police headquarters?
Mr. Sorrels. No; not to my knowledge.
Mr. Stern. Was he then interviewed by anyone?
Mr. Sorrels. I couldn't say.
Mr. Stern. Did you arrange for him to return to his home?
Mr. Sorrels. As I recall it, I did. I told him "they will take you
back to your home."
Mr. Stern. Immediately after the lineup?
Mr. Stern. Have you ever spoken to Mr. Brennan again after that
day?
Mr. Sorrels. Yes; I have.
Mr. Stern. When was that?
Mr. Sorrels. We were assisting the Commission in locating
witnesses to come to Washington, to the Commission, and I got in
touch with him and arranged for him to go and procured his ticket
and delivered his ticket to him.
Mr. Stern. And when you talked to him then, did he say anything
that bears upon our inquiry that he hadn't said before?
Mr. Stern. Mr. Sorrels, when you were at the police headquarters,
after this interview with Oswald that you have told us about, do you
recall talking to any representative of the FBI?
Mr. Sorrels. Yes.
Mr. Stern. Who was that?

Mr. Sorrels. Now, let's get that question again, because I talked
to them several times down there.
When was that you said?
Mr. Stern. After you interviewed Oswald.
Mr. Sorrels. Oh, yes, yes.
Mr. Stern. Do you know an FBI agent attached to the Dallas
office named James Hosty?
Mr. Sorrels. Yes, sir; I do.
Mr. Stern. Did you talk to Mr. Hosty that you recall?
Mr. Sorrels. Not that I recall; no, sir.
Mr. Stern. Might you have spoken to him, or do you think you
would remember that?
Mr. Sorrels. I think I would remember it.
Mr. Stern. Do you recall his being there?
Mr. Sorrels. I think I saw him there.
Now, whether it was on the 22d or not, but I think during along
this period, I saw him there one time.
But I don't recall talking to Mr. Hosty at all down there.
Mr. Stern. Did any of the agents attached to your office tell you
that they had talked to Hosty? Or that Hosty had told them
anything?
Mr. Sorrels. Yes; I think Special Agent Patterson, I believe, said
that he had seen Hosty down there, and that Hosty, I believe, had
said that he had a file on Oswald.
Mr. Stern. Do you recall anything else that Agent Patterson told
you that Mr. Hosty had told him?
Mr. Sorrels. No; I cannot recall anything else. Because I had
information—had also gotten information from others. In other

words, there was general information around the Police Department
there that the FBI had a file on this individual.
Mr. Stern. Any other of your agents tell you that Hosty had said
anything to them about Oswald that you can recall?
Mr. Sorrels. You mean at that specific date, regarding that
specific date?
Mr. Stern. Either on Friday or on Saturday.
Mr. Sorrels. No. During the course of this thing, it was my
understanding that—I don't remember how the information came to
me—that Hosty had been checking on this Oswald, and that they
had information or knew that he was in this building. I cannot
pinpoint it any way specifically, because the information came
several different times to that effect.
Mr. Stern. Now, you told us something of Oswald's physical
appearance when you saw him at the interview.
Mr. Stern. And at the showup.
Mr. Stern. Did his appearance change in the course of that time?
Mr. Stern. Over that 3-day period, did you see any sign that force
or any other form of coercion was used on Oswald by anyone?
Mr. Stern. Did you observe or hear of any intimidation of Oswald
or the offer of any benefit to Oswald if he were to confess?
Mr. Stern. Did you participate in or observe any other
interrogation of Oswald following your own brief interrogation?

Mr. Stern. When was that?
Mr. Sorrels. On the following day——
Mr. Stern. That is Saturday, the 23d?
Mr. Sorrels. Yes, sir; I sat in on part of an interview with him,
with Captain Fritz. And then, again, on Sunday the 24th, just before
he was shot.
Mr. Stern. Did the question of counsel come up again—that is, a
lawyer for Oswald?
Mr. Sorrels. Yes. During the interview with Captain Fritz, when I
was in there, he mentioned the fact that he wanted to get a man by
the name of Abt, or some similar name like that. I never had heard
of him before. Apt, or some similar name.
And Captain Fritz said, "Well, you can use the phone and you
can call him."
Mr. Stern. When was this?
Mr. Sorrels. That was Saturday morning. And it is my
understanding that Oswald did attempt to reach this man on the
phone.
Mr. Stern. But you didn't observe it?
Mr. Sorrels. I did not observe that; no.
Mr. Stern. Did you hear him mention at any time a lawyer from
the American Civil Liberties Union?
Mr. Sorrels. Yes. He said if he could not get this man—I wish I
could remember his name—a very short name, Apt or something like
that.
Mr. Stern. A-b-t?
Mr. Sorrels. Yes, A-b-t. Yes—if he couldn't get him, he wanted a
lawyer supplied by the Civil Liberties Union.

Mr. Stern. What else occurred at the interview on Saturday that
you can remember?
Mr. Sorrels. He was questioned about the rifle, because, at that
time, as I recall it, it had been determined that the rifle had been
purchased from Kleins in Chicago, and shipped to a person using the
name of A. Hidell. And he was questioned by Captain Fritz along
those lines. And he denied that the rifle was his. He denied knowing
or using the name of A. Hidell, or Alek Hidell.
He was, of course, questioned about his background and he at
that time still maintained an arrogant, defiant attitude. The
questions were, of course, directed towards getting information. A
lot of them he would not answer. And a lot of the answers, of
course, were apparent falsehoods.
And he gave me the impression of lying to Captain Fritz, and
deliberately doing so, maybe with an attempt to get Captain Fritz to
become angered, because he, Oswald, would flare up in an angry
manner from time to time.
Mr. Stern. But you think that was acting—not genuine?
Mr. Sorrels. That is the impression I got, that he was just
deliberately doing that, possibly to agitate Captain Fritz and maybe
get him to become angry, and maybe do or say something that he
shouldn't do.
That is just the impression I gained from him. And the reason—I
guess one reason I gained that impression is because on the last
interview, on Sunday morning, Oswald seemed to have taken a little
bit different attitude. In other words, he was talking a little bit freer
—he wasn't giving out any information of any value particularly, but
he wasn't flaring up like he did before.
Mr. Stern. Was that Sunday interview extended beyond any time
that you know of that it was scheduled to end?
Mr. Sorrels. Yes; it was, because the papers seemed to have
gotten the impression that he was going to be moved at exactly 10

o'clock in the morning, and Captain Fritz was talking to him even
after 11 o'clock in the morning—we were still there. And I recall that
Chief Curry came around and asked Captain Fritz how long he was
going to be, or what was holding it up, or something like that, that
they wanted to go ahead and get him moved as quick as they could.
Mr. Stern. Did be indicate or did you understand that they
wanted to move him at 10 o'clock?
Mr. Sorrels. It was after 10 o'clock then, considerably. As a
matter of fact, it was after 11 at that time. Captain Fritz remarked to
me afterwards, he said, "Well, as long as it looks like he might talk, I
hesitate to quit, or move him out at that time," and he told Chief
Curry, "We will be through in a few minutes."
And shortly after that, Captain Fritz asked if anyone wanted to
ask him any questions, and, at that time, the postal inspector had
obtained a change of address card which Oswald had apparently
filled out in which one of the names shown on that change of
address card that was to receive mail at that particular address in
New Orleans was named A. Hidell. And I desired to question Oswald
about that thing, because he had denied purchasing this rifle under
the name of A. Hidell, and he denied knowing anybody by the name
of A. Hidell.
So I showed Oswald this change of address card and said to
him, "Now, here is a change of address card that you filed in New
Orleans," and he looked at it.
He did not deny that he had filed the card, because it was
apparently in his handwriting, and his signature. And I said, "Now
you say that you have not used the name of A. Hidell, but you show
it on this card here as the name of A. Hidell, as a person to receive
mail at this address. If you do not know anyone by that name, why
would you have that name on that card?"
He said, "I never used the name of Hidell."
Mr. Stern. That was the last question he was asked?

Mr. Sorrels. As far as I know.
Mr. Stern. And then what happened?
Mr. Sorrels. He was told that they were going to move him to the
county jail, and he requested that he be permitted to get a shirt out
of his—the clothes that had been brought in, that belonged to him,
because the shirt he was wearing at the time he had been
apprehended was taken, apparently for laboratory examination. And
so Captain Fritz sent and got his clothes and, as I recall it, he
selected a dark colored kind of a sweater type shirt, as I recall it.
And then he was taken out, and, at that time, as I recall it, Inspector
Kelley and I left and went up to—I say up—down the hall to the
executive office area of the police department, and to the office of
Deputy Chief Batchelor.
And we remained in that vicinity. I looked out the window, and
saw the people across the street, on Commerce Street, people were
waiting there. And I saw an individual that I know by the name of
Ruby Goldstein, who is known as Honest Joe, that has a second-
hand tool and pawnshop down on Elm Street, and everyone around
there knows him. He was leaning on the car looking over in the
direction of the ramp there at the police station. And we were just
waiting around there.
And for a few minutes I was talking to one of the police officers
that was on duty up there in that area. And he had made the
remark, "talking about open windows, I see one open across the
street over there" at a building across the street.
I looked over there. I didn't see any activity at the window. And
we had walked out into the reception area of the executive office of
the Chief of Police there when this same police officer said that he
just heard that Oswald had got shot in the stomach in the basement
by Jack Rubin, as I understood at that time, R-u-b-i-n—who was
supposed to run a night club.
Inspector Kelley and I then went just as hurriedly as we could to
the basement.

Mr. Stern. As I understand it, Mr. Sorrels, you covered all the
relevant information from this point of time on with Mr. Hubert
yesterday.
Mr. Sorrels. Yes. And actually back just a little bit.
Mr. Stern. Is there anything that has occurred to you since your
interview with Mr. Hubert that you would like to add now, to amplify
anything you said yesterday to him?
Mr. Sorrels. We were trying to establish something about the
time yesterday morning that this transpired and so forth. And I could
not fix any exact time.
But knowing the fact that Oswald, I believe, is reported to have
been shot at 11:21, I believe it is, and the fact that when we got
into the basement of the City Hall there at a time when Oswald was
still on the floor there, and was being given artificial respiration, as I
said yesterday, and I immediately called my headquarters office in
Washington and told them about Oswald being shot by Jack Rubin, a
night club operator. And they asked me, of course, to get additional
information and call them back.
And from that telephone call, which went through very rapidly, I
went back upstairs—didn't tarry there at all. And Oswald was still
there when I left and went back upstairs to Captain Fritz' office,
because my thought was to talk to this man Jack Rubin as fast as I
could.
Captain Fritz was not there. They said he went to the hospital. I
asked where Ruby was. They said he was up on the fifth floor. I said
I would like to talk to him. And I was sent with an officer to the jail
elevator, went right on up there. So——
Mr. Stern. Have you been able to establish the time of your
phone call to Deputy Chief——
Mr. Sorrels. No, I have not been able to establish it. But after
thinking the thing over, and the fact that Oswald was still there at

the time this call was made, I would say that that phone call was
probably made between 11:25 and 11:30, I would say.
Mr. Stern. Fine.
Mr. Sorrels had you discussed with any official of the Dallas
Police the plans to move Oswald during a scheduled daylight hour,
before the move was made?
Mr. Sorrels. When I heard that he was supposed to be moved at
10 o'clock in the morning, I said to Captain Fritz—and as I recall this
conversation—I said to him, "Captain, I wouldn't move that man at
an announced time. I would take him out at 3 or 4 o'clock in the
morning, when there is nobody around."
And Captain Fritz said, "Well, the chief has gone along with
these people," talking about the press and television people, and
said that he wanted to continue going along with them and
cooperating with them all he can. And that was all that was said
about that.
I did not make that suggestion, or have a conversation like that
with Chief Curry, as I recall, because I did not want to appear that I
was trying to tell them how to run their business.
Mr. Stern. What were conditions like in the third floor corridor of
police headquarters from Friday through Sunday?
Mr. Sorrels. Mr. Stern, you would almost have to be there to see
it, to actually realize the conditions. The press and the television
people just, as the expression goes, took over. I would almost every
time I went up there, definitely after the 22d, I would have to
identify myself to get in past the entrance of the elevator on the
third floor, if I was going to the chief's office or the deputy chief's
office or Captain Fritz' office. You would have to elbow your way
through, and step over tripods and cables and wires, and every time
almost that I would come out of Captain Fritz's office, the minute the
door opened, they would flash on those bright lights, and I got
where I just shadowed my eyes when I walked down there to keep
the light from shining in my eyes. They had cables run through one

of the deputy chief's office, right through the windows from the
street up the side of the building, across the floor, out to the boxes
where they could get power—they had wires running out of that,
had the wires taped down to keep people from actually falling or
stumbling over the wires. And it was just a condition that you can
hardly explain. It was just almost indescribable.
I know at one time when Mr. Jim Underwood of KRLD, that is the
Dallas Time Herald Television Station down there, was in Captain
Fritz' office with Jack Ruby's sister, and a lady friend of hers, trying
to arrange for her to get up to talk to Jack Ruby, that the police
officer who was stationed at the door to the detective's office had a
terrific time keeping them—I thought they were going to barge on in
there. They were yelling like mad—because Mr. Underwood was in
there, and one of them was there yelling—"if he has got a right to
be in here, we have a right to be in there."
Just as loud as he could. And Mr. Underwood had to leave
Captain Fritz' office and say, "Listen, fellows, I am not going
upstairs. I am trying to make arrangements for this woman to see
her brother—I am not going upstairs."
That was just the situation you were booked up against there.
And, of course, every time you would turn around, they would
ask me something, and I would say, "No comment, I don't have any
comment to make."
And I don't think at any time you will see that there is any
statement made by the newspapers or television that we said
anything because Mr. Kelley, the Inspector, told me "Any information
that is given out will have to come from Inspector Peterson in
Washington."
Finally, after they found out I would not say anything, they didn't
bother me any more.
Many times when I would be going into the third floor area
there, they would start to stop me, and a lot of the guys that would
know me would say, "That is Sorrels of the Secret Service."

That happened more than once.
And, of course, I would have to go ahead and identify myself.
The officers that were on duty that had seen me before would
recognize me and pass me through.
Mr. Stern. Can you estimate how many press representatives
there were in that corridor?
Mr. Sorrels. I am not too good in estimating anything like that,
but there were dozens of them.
Mr. Stern. Was any effort made to restrict them to a far part of
the corridor, or to remove them from the floor entirely that you know
of?
Mr. Sorrels. Not that I know of.
Mr. Stern. Did you ever learn why this was not done—did you
ever ask?
Mr. Sorrels. No, I did not. I just thought to myself—well, if this
was being handled in a Federal building, this situation would not
exist. That is what I thought.
But, of course, that is a public building. I thought to myself—
well, they are in here, and the chief would have a heck of a time
getting them out. That is just my own thoughts about the thing,
because I do know that the Dallas Police Department, the Dallas
Sheriff's Office, they do try to go along with the press and
everything like that.
After this thing happened, Mr. Felix McKnight, who I mentioned
before, who is a personal friend of mine, executive editor of the
Dallas Times Herald, he said to me, "Forrest, those people should
have been out of there, and that includes us."
Of course the thing was all over then. I would imagine that Chief
Curry or anybody else that would have tried to have gotten them out
of there would have really had a tough time and they probably
would have really blasted them in the press.

Mr. Stern. Mr. Sorrels, that covers the ground that I wanted to
ask you about.
Is there anything you would like to add to anything you said this
morning with respect to the advance preparations, the actual events
in front of the Book Depository, your return there, anything that
elapsed while you were at the police headquarters from Friday
afternoon through Sunday morning—or with respect to anything you
told Mr. Hubert about yesterday?
Just take a moment and think about it.
And if there is anything you would like to amplify or add to what
you have said that you think the Commission should know, please
tell me.
Mr. Sorrels. I cannot recall anything right now, Mr. Stern.
Mr. Stern. I would like you to identify this one page
memorandum entitled "Statement of Forrest V. Sorrels, Special Agent
in Charge, U.S. Secret Service, Dallas, Tex., November 28, 1963."
I have marked this "Exhibit 5," deposition of F. V. Sorrels, May 7,
1964.
Mr. Sorrels. Yes, sir; that is a copy of a statement that I wrote
up.
Mr. Stern. Would you initial that for me, please?
Mr. Sorrels. Yes.
Mr. Stern. Would you review the statement and see if there is
anything you would like to add to it?
I think you might just tell us what it covers.
Mr. Sorrels. This is a statement which was written up by me on
November 28, 1963, relating the fact that the presidential
motorcade——
Mr. Stern. The statement will be in the record, Mr. Sorrels. I
meant just tell us the subject matter of it.

Welcome to our website – the perfect destination for book lovers and
knowledge seekers. We believe that every book holds a new world,
offering opportunities for learning, discovery, and personal growth.
That’s why we are dedicated to bringing you a diverse collection of
books, ranging from classic literature and specialized publications to
self-development guides and children's books.
More than just a book-buying platform, we strive to be a bridge
connecting you with timeless cultural and intellectual values. With an
elegant, user-friendly interface and a smart search system, you can
quickly find the books that best suit your interests. Additionally,
our special promotions and home delivery services help you save time
and fully enjoy the joy of reading.
Join us on a journey of knowledge exploration, passion nurturing, and
personal growth every day!
ebookbell.com

Sencha Touch In Action Jesus Garcia Anthony De Moss Mitchell Simoens

More Related Content

Similar to Sencha Touch In Action Jesus Garcia Anthony De Moss Mitchell Simoens (20)

Recently uploaded (20)

Sencha Touch In Action Jesus Garcia Anthony De Moss Mitchell Simoens