cyan yelloW maGenTa Black panTone 123 c Books for professionals By professionals® The eXperT’s Voice® in WeB DeVelopmenT Companion Author of eBook Available Practical Ext JS Projects with Gears Practical Ajax Projects with Java Technology Practical Practical JavaScript, DOM Dear Reader, Scripting, and Ajax Projects The world of web development has changed rapidly in a short period of time. E Practical DWR 2 Projects Practical It’s no longer enough to make an application that simply works and does what Practical Dojo Projects it’s supposed to; it’s got to work COOL and look good doing it. In other words, x rich Internet applications (RIAs) are where it’s at! The Ext JS library sits at the top of the mountain of options available for cre- t ating RIAs. Offering some of the best user interface components around, Ajax Ext JS capabilities, drag and drop, a data framework, and tons of general-purpose utilities, Ext JS has all you need to build modern RIAs. J The other part of the equation is Gears, from our friends at Google. Gears is a Projects browser extension that provides a host of new capabilities, including a true rela- S tional database system and even multithreading capabilities for JavaScript. Ext JS and Gears together form a truly potent one-two punch for RIA development. In this book you’ll learn by doing as you explore seven full, real-world applica- Gears tions, including: P • A personal information manager à la Microsoft Outlook r o • A project management/time-tracking application with j • A code cabinet for storing code snippets we • A mashup utilizing web services to look up and map local businesses c i • A utility for interacting with Gears-provided databases tt hs • An application for managing and tracking your finances that presents a portal interface and which utilizes a publish/subscribe architecture G • And even a fun little game! In the process you’ll gain a good understanding of Ext JS and Gears so you can hit the ground running with them in your own projects. You’ll do this all with a e smile on your face, too, as I throw more pop-culture references and witticisms at Learn about Ext JS 3.0 and Gears, two of the top you than you can shake a stick at! So, come on in—fun and learning await you! a technologies for developing modern rich Internet Frank W. Zammetti applications, by exploring the inner workings of SCJP, MCSD, MCP, CNA, A+, CIW Associate, i-Net+, CUA, Goa’uld System Lord r seven full, real-world applications Companion eBook s THE APRESS ROADMAP MooTools Essentials See last page for details Beginning JavaScript with Practical Ext JS Projects Includes on $10 eBook version DOM Scripting and Ajax with Gears Ext JS 3.0 Practical Dojo Projects Z a Frank W. Zammetti SOURCE CODE ONLINE m www.apress.com ISBN 978-1-4302-1924-8 m 54499 e t t US $44.99 i Shelve in Web Development User level: 9 781430 219248 Intermediate–Advanced this print for content only—size & color not accurate spine = 1.144" 600 page count Practical Ext JS Projects with Gears Frank W. Zammetti Practical Ext JS Projects with Gears Copyright © 2009 by Frank W. Zammetti All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-4302-1924-8 ISBN-13 (electronic): 978-1-4302-1925-5 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Java™ and all Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc., in the US and other countries. Apress, Inc., is not affiliated with Sun Microsystems, Inc., and this book was writ- ten without endorsement from Sun Microsystems, Inc. Lead Editor: Steve Anglin Development Editor: Douglas Pundick Technical Reviewer: Herman van Rosmalen Editorial Board: Clay Andres, Steve Anglin, Mark Beckner, Ewan Buckingham, Tony Campbell, Gary Cornell, Jonathan Gennick, Michelle Lowman, Matthew Moodie, Jeffrey Pepper, Frank Pohlmann, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Project Manager: Richard Dal Porto Copy Editor: Liz Welch Associate Production Director: Kari Brooks-Copony Production Editor: Katie Stence Compositor: Linda Weidemann, Wolf Creek Publishing Services Proofreader: Kim Burton Indexer: Brenda Miller Artist: Anthony Volpe Cover Designer: Kurt Krames Manufacturing Director: Tom Debolski Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail [email protected], or visit http://www.springeronline.com. For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail [email protected], or visit http://www.apress.com. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Spe- cial Bulk Sales–eBook Licensing web page at http://www.apress.com/info/bulksales. The information in this book is distributed on an “as is” basis, without warranty. Although every pre- caution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is available to readers at http://www.apress.com. You may need to answer questions pertaining to this book in order to successfully download the code. I’m going to do something unusual for me here and write a serious dedication. This book is dedicated to the memory of Michael A. Baker. Mike, the lead singer for a band named Shadow Gallery, passed away in October 2008 at the far-too-young age of 45. The music of Shadow Gallery has always been a huge inspiration for me, as a musician myself, as a writer, and simply as a human being who appreciates art that touches you. Mike’s voice was the emotional anchor of the group’s music, an integral part of the experience. I never had the privilege of meeting Mike in person, but through his work I feel like I knew him extremely well, and I don’t think I could come up with a greater compliment for any artist. Rest in peace, Mike, and I think I can safely say, on behalf of all Shadow Gallery fans, thank you. Contents at a Glance About the Author ..................................................................xiii About the Technical Reviewer ...................................................... xv About the Illustrator .............................................................. xvii Acknowledgments ................................................................xix Introduction ......................................................................xxi PART 1 ■ ■ ■ The Preliminaries ChaPtEr 1 Introducing Web Development with Ext JS ........................3 ChaPtEr 2 Widgets and Advanced Ext JS ..................................57 PART 2 ■ ■ ■ The Projects ChaPtEr 3 Ext JS for a Busy Lifestyle: OrganizerExt ........................131 ChaPtEr 4 Making Project Management Cool: TimekeeperExt ..............195 ChaPtEr 5 A Place for Your Stuff: Code Cabinet Ext ........................259 ChaPtEr 6 When the Yellow Pages Just Isn’t Cool Enough: Local Business Search ........................................309 ChaPtEr 7 Your Dad Had a Workbench, Now So Do You: SQL Workbench .....371 ChaPtEr 8 All Work and No Play: Dueling Cards ...........................437 ChaPtEr 9 Managing Your Finances: Finance Master ......................497 IndEx .......................................................................559 v Contents About the Author ..................................................................xiii About the Technical Reviewer ...................................................... xv About the Illustrator .............................................................. xvii Acknowledgments ................................................................xix Introduction ......................................................................xxi PART 1 ■ ■ ■ the Preliminaries ChaPtEr 1 Introducing Web development with Ext JS .................3 The Evolution of the Web: Web Sites vs. Web Applications .............3 The Rise of the Cool: Rich Internet Applications .......................6 Enter Ajax: The Driving Force behind RIAs ...........................9 Ajax (for Those Living under a Rock the Past 2–3 Years) ..........9 The Benefits of Ajax (and by Extension, RIAs) ...................10 The Evolution of Web Development ................................13 Choice Is Good: Toolkits Make It a Breeze ..........................14 Enter Ext JS: The Best of the Bunch ................................16 Fisher Price™ My First Ext JS Application ...........................19 Ext JS’s High-Level Organizational Structure ........................20 Global-Scope Classes .......................................21 The Ext Namespace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34 Ext.Ajax ...................................................34 Ext.DomHelper .............................................36 Ext.DomQuery ..............................................39 Ext.Updater ................................................43 vii viii ■CONTENTS The Ext.util Namespace ..........................................44 Ext.util.CSS ................................................44 Ext.util.DelayedTask ........................................45 Ext.util.Format .............................................46 Ext.util.JSON ...............................................49 Ext.util.MixedCollection ......................................50 Ext.util.TaskRunner .........................................53 Ext.util.TextMetrics .........................................54 But...but...What About the Widgets? .............................55 One Last Tangential Thing: Ext Core ...............................55 Summary .......................................................56 ChaPtEr 2 Widgets and advanced Ext JS ..............................57 Ext JS Widgets: An Overview ......................................57 The Hierarchy of Widgets ....................................58 The Basics of Widget Usage ..................................60 Layout and Containers in Ext JS ..............................62 Form Widgets ..............................................75 Menus and Toolbars (Oh My!) ................................87 Trees in Ext JS .............................................90 Grids in Ext JS .............................................93 The Other Widgets ..........................................95 Working with Data in Ext JS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101 The Template and XTemplate Classes .............................105 Drag and Drop .................................................109 The “State” of Things ...........................................116 For Your Date in the Boardroom: Ext JS Charting ...................118 Plug-ins .......................................................122 These Are the Gears That Power the Tubes!. . . . . . . . . . . . . . . . . . . . . . . .123 LocalServer ...............................................124 WorkerPool ...............................................124 Database .................................................124 Summary ......................................................127