Covers EXT JS version 4.0 IN ACTION SECOND EDITION Jesus Garcia Grgur Grisogono Jacob K. Andresen MANNING Ext JS in Action, Second Edition Licensed to <[email protected]> Licensed to <[email protected]> Ext JS in Action, Second Edition JESUS GARCIA GRGUR GRISOGONO JACOB K. ANDRESEN MANNING SHELTER ISLAND Licensed to <[email protected]> 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: [email protected] ©2014 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. 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 editors: Sebastian Stirling, Frank Pohlman 20 Baldwin Road Copyeditor: Tiffany Taylor PO Box 261 Proofreader: Melody Dolab Shelter Island, NY 11964 Typesetter: Dennis Dalinnik Cover designer: Marija Tudor ISBN: 9781617290329 Printed in the United States of America 12345678910–MAL–191817161514 Licensed to <[email protected]> brief contents PART 1INTRODUCTION TO EXT JS 4.0 ......................................1 1 ■ A framework apart 3 2 ■ DOM manipulation 28 3 ■ Components and containers 45 PART 2EXT JS COMPONENTS ..................................................65 4 ■ Core UI components 67 5 ■ Exploring layouts 91 6 ■ Forms in Ext JS 119 7 ■ The data store 147 8 ■ The grid panel 168 9 ■ Taking root with trees 196 10 ■ Drawing and charting 218 11 ■ Remote method invocation with Ext Direct 251 12 ■ Drag-and-drop 269 PART 3BUILDING AN APPLICATION........................................311 13 ■ Class system foundations 313 14 ■ Building an application 337 v Licensed to <[email protected]> Licensed to <[email protected]> contents preface xv acknowledgments xvi about this book xix about the cover illustration xxiii PART 1INTRODUCTION TO EXT JS 4.0...........................1 A framework apart 3 1 1.1 Looking at Ext JS 4 Rich API documentation 5 ■ Rapid development with prebuilt widgets 7 1.2 What you need to know 7 1.3 A tour of the Ext JS widgets 7 Containers and layouts at a glance 9 ■ Other containers in action 10 ■ Data-bound views 11 ■ Make like a tree panel and leaf 13 ■ Form input fields 14 Other widgets 16 1.4 What’s new in Ext JS 4.0 17 Poof goes the adapter layer! 17 ■ New class system 17 Data package 18 ■ Layouts: an explosion of code 19 New docking system 19 ■ Grid panel improvements 19 vii Licensed to <[email protected]> viii CONTENTS Tree panel now closer to grids 20 ■ Draw and charts 21 New CSS styling architecture 22 ■ New MVC architecture 22 Bundled packaging tool 22 1.5 Downloading and configuring 22 1.6 Take it for a test drive 24 1.7 Summary 26 DOM manipulation 28 2 2.1 Let Ext JS kick off your code 29 2.2 Managing DOM elements with Ext.Element 31 The heart of the framework 31 ■ Using Ext.Element for the first time 31 ■ Creating child nodes 33 Removing child nodes 35 ■ Using Ajax with Ext.Element 37 2.3 Using templates and XTemplates 38 Using templates 38 ■ Looping with XTemplates 41 Advanced XTemplate usage 42 2.4 Summary 44 Components and containers 45 3 3.1 The Component model 46 XTypes and ComponentManager 47 ■ Component rendering 49 3.2 The component life cycle 50 Initialization 51 ■ Render 53 ■ Destruction 56 3.3 Containers 57 Building a container with child items 57 Dealing with children 59 3.4 Querying for components 60 3.5 The viewport container 62 3.6 Summary 64 PART 2EXT JS COMPONENTS.......................................65 Core UI components 67 4 4.1 The panel 68 Building a complex panel 69 ■ Adding buttons and tools 71 Docking items to a panel 72 ■ Weight matters! 75 Licensed to <[email protected]> CONTENTS ix 4.2 Displaying window dialogs 77 Building a window 77 ■ Further window configuration 79 4.3 MessageBox 80 Alerting your users 81 ■ Advanced MessageBox techniques 82 Showing an animated wait message box 84 4.4 Components can live in tab panels too 85 Building your first tab panel 86 ■ Tab management methods you should know 89 4.5 Summary 89 Exploring layouts 91 5 5.1 How layout managers work 92 Component layouts 92 ■ Container layouts 92 5.2 The Auto layout 92 5.3 The Anchor layout 94 5.4 The Absolute layout 98 5.5 The Fit layout 99 5.6 The Accordion layout 100 5.7 The Card layout 102 5.8 The Column layout 105 5.9 The HBox and VBox layouts 107 5.10 The Table layout 110 5.11 The Border layout 113 5.12 Summary 117 Forms in Ext JS 119 6 6.1 Basic input fields 120 Input fields and validation 120 ■ Password and file-select fields 123 ■ Building a text area 123 The convenient number field 124 6.2 Type-ahead with the ComboBox 124 Building a local ComboBox 125 ■ Implementing a remote ComboBox 127 ■ The ComboBox deconstructed 130 Customizing your ComboBox 130 6.3 The time field 131 Licensed to <[email protected]> x CONTENTS 6.4 The HTML Editor 132 Constructing your first HTML Editor 132 Dealing with lack of validation 133 6.5 Selecting a date 133 6.6 Checkboxes and radio buttons 134 6.7 The form panel 136 Reviewing what you’re building 137 ■ Constructing the fieldsets 137 ■ Creating the tab panel 140 6.8 Data submission and loading 142 Submitting the good old way 142 ■ Submitting via Ajax 143 Loading data into your form 144 6.9 Summary 146 The data store 147 7 7.1 Introducing the data store 148 The supporting classes 148 ■ How data flows 149 All about data proxies 150 ■ Models and readers 152 7.2 Loading and saving data 153 Reading array data 153 ■ Reading JSON data 156 Reading XML data 158 7.3 A store with Writer 159 Validating your model data 161 ■ Syncing your data 163 7.4 Associating data 164 7.5 Summary 167 The grid panel 168 8 8.1 Introducing the grid panel 169 Looking under the hood 169 8.2 Building a simple grid panel 170 8.3 Advanced grid panel construction 172 What you’re building 172 ■ The required data store and model 173 ■ Setting up columns 174 Configuring your advanced grid panel 175 Configuring a container for your grid panel 176 Buffered paginated scrolling 178 ■ Applying event handlers for interaction 180 Licensed to <[email protected]> CONTENTS xi 8.4 Editing data in the grid panel 183 Enabling the editing plug-in 183 ■ Navigating your editable grid panel 188 8.5 Getting the CRUD in 189 Adding save and reject logic 189 ■ Saving or rejecting your changes 190 ■ Adding create and delete 190 Using create and delete 193 8.6 Summary 195 Taking root with trees 196 9 9.1 Tree panel theory 196 Tree panel keywords 197 ■ Looking under the roots 198 9.2 Planting your first tree panel 198 9.3 Growing dynamic tree panels 201 Creating a remote-loading panel 201 ■ Fertilizing the tree panel 203 9.4 Implementing CRUD on a tree panel 205 Displaying context menus 205 ■ Wiring up the edit logic 209 Tackling delete 213 ■ Creating nodes for your tree panel 215 9.5 Summary 217 Drawing and charting 218 10 10.1 Drawing shapes 219 10.2 Drawing concepts 219 10.3 Surfacing sprites 220 Drawing a sprite 221 ■ Managing positioning and sizing 222 Automatically sizing sprites 224 10.4 Sprite interactions 225 10.5 Mastering the path 228 10.6 A deep dive into charts 231 10.7 Implementing Cartesian charts 233 Configuring the axes 233 ■ Adding series 236 Improving visual aids 237 ■ Adding custom shapes 240 Multiple series on the same chart 242 10.8 Custom themes 244 10.9 Pie charts 248 10.10 Summary 250 Licensed to <[email protected]> xii CONTENTS Remote method invocation with Ext Direct 251 11 11.1 Making the two ends meet 252 11.2 Ext Direct vs. REST 252 11.3 Server-side setup 255 How it works 255 ■ Remote method configuration 255 Routing 256 11.4 Working with remote methods 257 Setting up the router 257 ■ Enabling Ext Direct 259 11.5 Directly invoking remote methods 262 11.6 CRUD-enabled Ext.data.DirectStore 265 11.7 Summary 268 Drag-and-drop 269 12 12.1 The drag-and-drop workflow 270 The drag-and-drop life cycle 270 ■ A top-down view of the drag-and-drop classes 271 ■ It’s all in the overrides! 274 Drag-and-drop always works in groups 275 12.2 Drag-and-drop: a basic example 275 Creating a small workspace 275 ■ Configuring items to be draggable 277 ■ Analyzing the Ext.dd.DD DOM changes 277 ■ Adding the pool and hot tub drop targets 279 12.3 Finishing your drag-and-drop implementation 280 Adding the drop invitation 281 ■ Adding a valid drop 283 Implementing an invalid drop 285 12.4 Using DDProxy 286 Implementing DDProxy and the drop invitation 286 12.5 Drag-and-drop with views 290 Constructing the views 290 ■ Adding drag gestures 294 Applying drop 297 12.6 Drag-and-drop with grid panels 301 Constructing the grid panels 301 12.7 Drag-and-drop with tree panels 304 Constructing the tree panels 305 ■ Enabling drag-and-drop