Sencha Touch Cookbook

418 Pages·2013·5.04 MB·English

by  Ajit Kumar

Sencha Touch
Cookbook
Second Edition
Over 100 hands-on recipes to help you understand
the complete Sencha Touch framework and solve
your day-to-day problems
Ajit Kumar
BIRMINGHAM - MUMBAI
Sencha Touch Cookbook
Second Edition
Copyright © 2013 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system,
or transmitted in any form or by any means, without the prior written permission of the
publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the
information presented. However, the information contained in this book is sold without
warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers
and distributors will be held liable for any damages caused or alleged to be caused directly
or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the
companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.
First published: December 2011
Second edition: August 2013
Production Reference: 1130813
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78216-918-5
www.packtpub.com
Cover Image by Abhishek Pandey ([email protected])
Credits
Author Project Coordinator
Ajit Kumar Apeksha Chitnis
Reviewers Proofreader
Joseph Khan Stephen Copestake
Michael McCurrey
Indexer
Monica Ajmera Mehta
Acquisition Editor
Usha Iyer
Graphics
Valentina Dsilva
Lead Technical Editor
Anila Vincent
Production Coordinator
Nitesh Thakur
Technical Editors
Shali Sasidharan
Hardik Soni Cover Work
Nitesh Thakur
Sharvari H. Baet
Copy Editors
Brandt D'Mello
Gladson Monteiro
Insiya Morbiwala
Aditya Nair
Alfida Paiva
Adithi Shetty
Laxmi Subramanian
About the Author
Ajit Kumar started his IT career with Honeywell, Bangalore in the field of embedded
systems and moved on to enterprise business applications (such as ERP) in his 13 years'
career. From day one, he has been a staunch supporter and promoter of open source and
believes strongly that open source is the way for a liberal, diversified, and democratic setup,
such as India. He dreams, and continuously strives to ensure, that architecture, frameworks,
and tools must facilitate software development at the speed of thought.
Ajit holds a Bachelor's degree in Computer Science and Engineering from the Bihar Institute
of Technology, Sindri. He co-founded Walking Tree, which is based out of Hyderabad, India
where he plays the role of CTO and works on fulfilling his vision.
Prior to writing this book, he worked on the following titles by Packt Publishing:
f ADempiere 3.6 Cookbook
f Sencha Touch Cookbook
f Sencha MVC Architecture
I would like to thank my wife Priti for her untiring support, my family, and my
team at Walking Tree for their constant motivation, the readers of the first
edition of this book for their encouraging feedback, and the team behind
the Sencha Touch framework.
About the Reviewers
Joseph Khan is a Senior Web Developer at GoldSpot Media where he specializes in HTML5
standard mobile web apps, JavaScript/CSS3 standard rich media apps, and other Rich
Internet Applications (RIA). Before moving into mobile web development, he was working
with Adobe Flex, Action Script, and Flash technologies and developed data visualization and
enterprise dashboard-based applications for clients such as Cisco, The World Bank, AADI, and
other global organizations. His liking for mobile web development occurred recently and he
has been hooked ever since. He also likes Phonegap, PHP, Drupal, and Python.
He has a Bachelor's degree in Computer Science from N.I.T Silchar, India and has been
working on the Web and related technologies for six years.
Besides his regular work he also likes to design cars and motorbikes, ride his
Yamaha, and look for good food. Find out more about him and all his work at
http://jbkflex.wordpress.com/.
He is also the author of Instant Adobe Edge Inspect Starter, Packt Publishing.
I would like to dedicate this book to my parents and my wife Nilofer without
whom I would not have been here, and especially to my 5-month-old baby
boy Ayaan.
Michael McCurrey has been working in the software development industry for over
15 years. He has been party to the success of many notable software startups including
SalesLogix and Trans-soft. Besides technical editing titles, he works as the Software
Development Manager at Ping Golf in Phoenix, Arizona. He lives in Arizona with his wife,
Sunni, and their three children Mickie, Zachary, and Daimon.
www.PacktPub.com
Support files, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support files and downloads related
to your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub
files available? You can upgrade to the eBook version at www.PacktPub.com and as a print
book customer, you are entitled to a discount on the eBook copy. Get in touch with us at
[email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up
for a range of free newsletters and receive exclusive discounts and offers on Packt books
and eBooks.
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book
library. Here, you can access, read and search across Packt's entire library of books.
Why Subscribe?
f Fully searchable across every book published by Packt
f Copy and paste, print and bookmark content
f On demand and accessible via web browser
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib
today and view nine entirely free books. Simply use your login credentials for immediate access.
Table of Contents
Preface 1
Chapter 1: Gear Up for the Journey 7
Introduction 7
Setting up the Android-based development environment 10
Setting up the iOS-based development environment 17
Setting up the BlackBerry-based development environment 22
Setting up a browser-based development environment 25
Detecting the device 26
Finding features that are supported in the current environment 28
Letting your application configure itself using profiles 30
Responding to orientation changes 32
Chapter 2: Catering to Your Form-related Needs 35
Introduction 36
Getting your form ready with form panels 37
Working with the search field 44
Applying custom validation in the e-mail field 46
Working with dates using the date picker 48
Making a field hidden 51
Working with the select field 53
Changing a value using slider 55
Spinning the number wheel using spinner 56
Toggling between your two choices 59
Checkbox and checkbox groups 60
Text and text area 62
Grouping fields with fieldset 65
Validating your form 67
Table of Contents
Chapter 3: Containers and Layouts 71
Introduction 71
Keeping your container lightweight 74
Working with Panel 76
Adding items to a container at runtime 80
Building wizards using CardLayout 86
Docking items 92
Fitting into the container using FitLayout 94
Arranging your items horizontally using HBoxLayout 95
Arranging your items vertically using VBoxLayout 98
Mixing layouts 102
Easing view navigation with the NavigationView class 105
Chapter 4: Building Custom Views 111
Introduction 111
Basic HTML templating using Template 112
Using XTemplate for advanced templating 118
Conditional view rendering using XTemplate 121
Designing custom views using DataView 124
Showing the filtered data 128
Responding to user actions 133
Chapter 5: Dealing with Data and Data Sources 139
Introduction 140
Creating a model 141
Loading the form using a data model 145
Working with a store 150
Converting incoming JSON data into a model using JsonReader 155
Converting incoming XML data into the model using XmlReader 161
Validations in models 165
Defining your custom validation 169
Relating models using association 172
Persisting session-specific data using the SessionStorage proxy 177
Persisting data using the LocalStorage proxy 182
Accessing in-memory data using the Memory proxy 183
Loading data through AJAX using the Ajax proxy 186
Sorting data 189
Data grouping 192
Filtering data 193
Using a cross-domain URL in your application 195
Working with Web SQL databases 200
ii
Table of Contents
Chapter 6: Adding Components 205
Introduction 206
Working with the button component 206
Creating a sheet of buttons with ActionSheet 211
Carousel 216
Managing a list of data using List 221
Grouping items in a list 224
Navigating through a list of data using IndexBar 226
Working with a list of nested data using NestedList 228
Picking up your choice using Picker 235
Switching between multiple views using SegmentedButton 240
Working with Tab panels 242
Getting quicker access to application features using Toolbar 245
Creating a new component 247
Extending an existing component's capability 250
Overriding a component's behavior 255
Adding behavior to an existing component using plugins 257
Chapter 7: Adding Audio/Visual Appeal 261
Introduction 262
Animating an element 262
Ding-dong! You have got a message 265
Working with videos 270
Creating your drawing 273
Working with an area chart 275
Working with a bar chart 280
Working with a column chart 284
Showing a group of bars and columns 286
Highlighting and displaying an item detail 289
Working with a gauge chart 292
Working with a line chart 294
Working with a pie chart 298
Rotating the pies 301
Highlighting a pie 302
Working with a 3D pie chart 303
Working with a radar chart 305
Working with a scatter chart 309
Working with a candlestick/OHLC chart 313
iii