www.it-ebooks.info www.it-ebooks.info Sencha Touch Up and Running Adrian Kosmaczewski www.it-ebooks.info Sencha Touch Up and Running by Adrian Kosmaczewski Copyright © 2013 Adrian Kosmaczewski All rights reserved Printed in the United States of America Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472 O’Reilly books may be purchased for educational, business, or sales promotional use Online editions are also available for most titles (http://my.safaribooksonline.com) For more information, contact our corporate/ institutional sales department: 800-998-9938 or corporate@oreilly.com Editors: Simon St Laurent and Meghan Blanchette Production Editor: Melanie Yarbrough March 2013: Proofreader: Julie Van Keuren Indexer: Judy McConville Cover Designer: Karen Montgomery Interior Designer: David Futato Illustrator: Rebecca Demarest First Edition Revision History for the First Edition: 2013-02-12 First release See http://oreilly.com/catalog/errata.csp?isbn=9781449339388 for release details Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc Sencha Touch 2: Up and Running, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trade‐ mark claim, the designations have been printed in caps or initial caps While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein ISBN: 978-1-449-33938-8 [LSI] www.it-ebooks.info This book is dedicated with love and gratitude to Claudia Te amo, preciosa www.it-ebooks.info www.it-ebooks.info Table of Contents Preface xi Getting Started What Is Sencha Touch? What Kind of Applications Can You Build with It? A Bit of History Main Features Device and Browser Support Licensing Installing the Developer Environment Sencha Touch Distribution Installing Sencha Cmd Creating a New Application Bare-Bones App The Ext.application() Function Using Sencha Cmd Overview of the Class Library Embedding Components Layouts Intro to Events Sencha Touch Documentation System Conclusion 2 4 9 11 15 17 18 18 19 19 22 The Class System 23 Architectural Considerations Folder Organization Understanding the Class System Using xtypes Overview of the Class Library 23 25 25 27 29 v www.it-ebooks.info Foundation Utilities Ext Ext.Array Ext.ComponentQuery Ext.DateExtras Ext.DomHelper and Ext.DomQuery Ext.env.Feature Ext.Function Ext.JSON Ext.Logger Ext.Number Ext.Object Ext.String Ext.Version Ext.mixin.Observable Ext.util.DelayedTask Ext.util.HashMap Ext.util.Inflector Conclusion 30 30 35 43 43 48 50 51 55 55 56 57 61 63 64 65 66 67 69 Views 71 Components, Containers, and Panels Events Layouts Templates Component Library Catalog Components Containers Panels Multimedia Views Creating Views Choosing a Base Class Creating the Class Skeleton Adding Configuration Options Providing Initialization Firing Custom Events Implement Private Methods Conclusion 71 72 73 79 80 81 87 95 103 111 112 113 114 115 116 117 118 Data 119 Model Classes Model Field Types vi | 119 121 Table of Contents www.it-ebooks.info Associations Validations Stores and Proxies Local Proxies Remote Proxies Store Types The StoreManager Singleton Data-Bound Controls DataView Lists Nested Lists Conclusion 122 122 123 124 126 130 130 134 134 138 140 142 Forms 143 Form Panels Fieldsets Field Types Text Fields Checkboxes and Radio Groups Slider Using Data with Forms Conclusion 143 145 145 146 156 159 161 162 Controllers 163 Director of the Orchestra Creating a Controller Initialization Routing and Deep-Linking Conclusion 163 164 167 168 170 Styling Applications 171 Using the Default Sencha Styles Introduction to Sass Variables Nesting Inheritance Functions Mixins Using Sass in Sencha Touch Generating CSS with Compass Sencha Touch Sass Parameters 171 172 173 174 174 175 176 177 179 180 Table of Contents www.it-ebooks.info | vii Conclusion 184 Debugging, Testing, and Documenting 185 Debugging WebKit Web Inspector Remote Debugging Adobe Edge Inspect Testing Jasmine Siesta Documenting Your Code with JSDuck Tips for Quality Sencha Touch Apps Conclusion 185 185 192 194 196 197 203 208 212 214 Sencha Architect 215 Introduction Installation User Interface Creating a Simple Application Configuring the Application Creating a Model Class Creating a Store Creating Views and Forms Creating Controllers Working with Projects Conclusion 215 216 218 220 220 221 223 225 226 228 231 10 Deployment in Devices 233 Using Profiles Adding Profiles Initialization Functions Custom MVC Classes Using Device Features Device Capabilities Accessing the Camera Native Notifications and Vibration Orientation Changes Network Connectivity Location Information Packaging with Sencha Cmd Creating Standalone Apps Creating Workspaces viii | Table of Contents www.it-ebooks.info 233 234 235 235 236 237 237 238 239 239 240 242 242 243 ... Views and Forms Creating Controllers Working with Projects Conclusion 21 5 21 6 21 8 22 0 22 0 22 1 22 3 22 5 22 6 22 8 23 1 10 Deployment in Devices 23 3... www.it-ebooks.info 23 3 23 4 23 5 23 5 23 6 23 7 23 7 23 8 23 9 23 9 24 0 24 2 24 2 24 3 Packaging Applications Running Applications in the iOS Simulator Running Applications in an iOS Device Packaging with Sencha Architect...www.it-ebooks.info Sencha Touch Up and Running Adrian Kosmaczewski www.it-ebooks.info Sencha Touch Up and Running by Adrian Kosmaczewski Copyright © 20 13 Adrian Kosmaczewski All rights