Ext JS in Action, Second Edition

408 Pages·2014·14.96 MB·English

Covers E JS version 4.0
XT
IN ACTION
SECOND EDITION
Jesus Garcia
Grgur Grisogono
Jacob K. Andresen
M A N N I N G
Ext JS in Action, Second Edition

Ext JS in Action,
Second Edition
JESUS GARCIA
GRGUR GRISOGONO
JACOB K. ANDRESEN
MANNING
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: [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
1 2 3 4 5 6 7 8 9 10 – MAL – 19 18 17 16 15 14
brief contents
PART 1 INTRODUCTION TO EXT JS 4.0. ....................................1
1 ■ A framework apart 3
2 ■ DOM manipulation 28
3 ■ Components and containers 45
PART 2 EXT 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 3 BUILDING AN APPLICATION........................................311
13 ■ Class system foundations 313
14 ■ Building an application 337
v

contents
preface xv
acknowledgments xvi
about this book xix
about the cover illustration xxiii
PART 1 INTRODUCTION TO EXT JS 4.0. .........................1
1 A framework apart 3
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
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
2 DOM manipulation 28
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
3 Components and containers 45
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 2 EXT JS COMPONENTS.......................................65
4 Core UI components 67
4.1 The panel 68
Building a complex panel 69 ■ Adding buttons and tools 71
Docking items to a panel 72 ■ Weight matters! 75
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
5 Exploring layouts 91
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
6 Forms in Ext JS 119
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