Ext JS in action, 2nd edition

Covers E XT JS version 4.0

IN ACTION
SECOND EDITION

Jesus Garcia
Grgur Grisogono
Jacob K. Andresen

MANNING

www.it-ebooks.info


Ext JS in Action, Second Edition

www.it-ebooks.info


www.it-ebooks.info


Ext JS in Action,
Second Edition
JESUS GARCIA
GRGUR GRISOGONO
JACOB K. ANDRESEN

MANNING
SHELTER ISLAND

www.it-ebooks.info


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:
©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.
20 Baldwin Road
PO Box 261
Shelter Island, NY 11964

Development editors:
Copyeditor:
Proofreader:
Typesetter:
Cover designer:

Sebastian Stirling, Frank Pohlman
Tiffany Taylor
Melody Dolab
Dennis Dalinnik
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

www.it-ebooks.info


brief contents
PART 1

PART 2

PART 3

INTRODUCTION TO EXT JS 4.0 . ....................................1
1

■

2

■

3

■

A framework apart 3
DOM manipulation 28
Components and containers 45

EXT JS COMPONENTS ..................................................65
4

■

5

■

6

■

7

■

8

■

9

■

10

■

11

■

12

■

Core UI components 67
Exploring layouts 91
Forms in Ext JS 119
The data store 147
The grid panel 168
Taking root with trees 196
Drawing and charting 218
Remote method invocation with Ext Direct
Drag-and-drop 269

251

BUILDING AN APPLICATION........................................311
13

■

14

■

Class system foundations 313
Building an application 337
v

www.it-ebooks.info


www.it-ebooks.info


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
with prebuilt widgets 7

1.2
1.3

5

■

Rapid development

What you need to know 7
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

www.it-ebooks.info


CONTENTS

viii

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
1.6
1.7

2

Downloading and configuring
Take it for a test drive 24
Summary 26

22

DOM manipulation 28
2.1
2.2

Let Ext JS kick off your code 29
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
■

■

■

2.3

Using templates and XTemplates

38

Using templates 38 Looping with XTemplates
Advanced XTemplate usage 42
■

2.4

3

37

41

Summary 44

Components and containers 45
3.1

The Component model 46
XTypes and ComponentManager

3.2

The component life cycle
Initialization

3.3

Containers

51

■

47

Component rendering 49

50

Render 53

■

Destruction

56

57

Building a container with child items
Dealing with children 59

3.4
3.5
3.6

■

57

Querying for components 60
The viewport container 62
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

Docking items to a panel 72 Weight matters! 75
■

■

www.it-ebooks.info

71


CONTENTS

4.2

Displaying window dialogs
Building a window

4.3

ix

MessageBox

77

■

77

Further window configuration

79

80

Alerting your users 81 Advanced MessageBox techniques
Showing an animated wait message box 84
■

4.4

Components can live in tab panels too 85
Building your first tab panel
you should know 89

4.5

5

■

Tab management methods

Summary 89

Exploring layouts 91
5.1

How layout managers work
Component layouts

5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.10
5.11
5.12

6

86

92

■

92

Container layouts 92

The Auto layout 92
The Anchor layout 94
The Absolute layout 98
The Fit layout 99
The Accordion layout 100

The Card layout 102
The Column layout 105
The HBox and VBox layouts
The Table layout 110
The Border layout 113
Summary 117

107

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

www.it-ebooks.info

82


CONTENTS

x

6.4

The HTML Editor 132
Constructing your first HTML Editor 132
Dealing with lack of validation 133

6.5
6.6
6.7

Selecting a date 133
Checkboxes and radio buttons 134
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
Loading data into your form 144

6.9

7

147

Introducing the data store

148

The supporting classes 148

All about data proxies 150

7.2

Loading and saving data
Reading array data 153
Reading XML data 158

7.3

A store with Writer

■
■

How data flows 149
Models and readers 152

153
■

Reading JSON data 156

159

Validating your model data 161

7.4
7.5

8

Submitting via Ajax 143

Summary 146

The data store
7.1

■

Associating data
Summary 167

■

Syncing your data 163

164

The grid panel 168
8.1

Introducing the grid panel
Looking under the hood

8.2
8.3

169

169

Building a simple grid panel 170
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
■

■

■

www.it-ebooks.info


CONTENTS

8.4

xi

Editing data in the grid panel

183

Enabling the editing plug-in 183
grid panel 188

8.5

Getting the CRUD in

■

Navigating your editable

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

9

Summary 195

Taking root with trees 196
9.1

Tree panel theory 196

Tree panel keywords

9.2
9.3

197

■

Looking under the roots 198

Planting your first tree panel 198
Growing dynamic tree panels 201
Creating a remote-loading panel
tree panel 203

9.4

201

■

Fertilizing the

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

10

Summary 217

Drawing and charting 218
10.1
10.2
10.3

Drawing shapes 219
Drawing concepts 219
Surfacing sprites 220
Drawing a sprite 221 Managing positioning and sizing
Automatically sizing sprites 224
■

10.4
10.5
10.6
10.7

Sprite interactions 225
Mastering the path 228
A deep dive into charts 231
Implementing Cartesian charts

233

Configuring the axes 233 Adding series 236
Improving visual aids 237 Adding custom shapes
Multiple series on the same chart 242
■

■

10.8
10.9
10.10

Custom themes 244
Pie charts 248
Summary 250
www.it-ebooks.info

240

222


CONTENTS

xii

11

Remote method invocation with Ext Direct 251
11.1

11.2
11.3

Making the two ends meet 252
Ext Direct vs. REST 252
Server-side setup 255
How it works 255
Routing 256

11.4

■

Remote method configuration

Working with remote methods 257
Setting up the router 257

11.5
11.6
11.7

12

255

■

Enabling Ext Direct 259

Directly invoking remote methods 262
CRUD-enabled Ext.data.DirectStore 265
Summary 268

Drag-and-drop 269
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!
Drag-and-drop always works in groups 275
■

274

■

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
Implementing an invalid drop 285
■

12.4

Using DDProxy

286

Implementing DDProxy and the drop invitation

12.5

Drag-and-drop with views
Constructing the views
Applying drop 297

12.6

290

286

290
■

Adding drag gestures

Drag-and-drop with grid panels
Constructing the grid panels

12.7

283

294

301

301

Drag-and-drop with tree panels

304

Constructing the tree panels 305 Enabling drag-and-drop 306

Employing flexible constraints 307
■

12.8

Summary

310

www.it-ebooks.info


CONTENTS

xiii

PART 3 BUILDING AN APPLICATION ............................311

13

Class system foundations 313
13.1

Classic JavaScript inheritance
Creating a base class 314

13.2

Inheritance with Ext JS

Creating a subclass

■

315

317

Creating a base class 317

13.3

314

Creating a subclass

■

Extending Ext JS components

319

320

Thinking about what you’re building 321
Extending GridPanel 322 Your extension in action 324
■

13.4

Plug-ins to the rescue

326

The anatomy of a plug-in 326

13.5

■

Developing a plug-in

Dynamically loading classes with the Ext JS loader

327

330

Loading everything dynamically 330 Thou shalt require
only what’s needed 332 Taking the hybrid approach 333
■

■

13.6

14

Summary

335

Building an application 337
14.1
14.2

Thinking as a web UI developer 338
Application (infra)structure 338
Development within a namespace 339
Dynamic dependency loading 341

14.3

Kicking off the Survey app

344

From idea to code 344 Moving to the fast track
with Sencha Cmd 345 Bootstrapping Survey 348
Data-driven application model 351 Adding models
to the application 352 Adding data stores 356
Creating the authentication form 357 Plugging in
the first controller 359 Survey views 360
Survey controllers 364
■

■

■

■

■

■

14.4
14.5

Packaging 370
Summary 371
index

373

www.it-ebooks.info


www.it-ebooks.info


preface
I started my career in the world of Sencha back in 2006 when the precursor to what is
known as Ext JS today (Sencha’s desktop JavaScript framework) was something of an
experiment. Soon after my introduction, I became addicted to the design patterns
that were promoted by the quickly evolving framework. But, more importantly, I fell in
love with the thriving community of developers looking to give back.
I was inspired by many of the active members in the community, and decided to
become a contributing member myself, spending tens of hours per week answering
questions, writing blog posts, and eventually publishing instructional screencasts. Times

were certainly interesting back then, as design patterns emerged from the community.
This second edition of Ext JS in Action, originally published in 2010, reflects a new
era of desktop web front-end development that was ushered in by Ext JS 4.0. This version brought forth an extremely robust class system and offers many capabilities that
extend those of JavaScript. Add to that a very well-designed event system, data package, UI, and MVC, and in Ext JS 4.0 you have a powerful framework that will allow you
to develop applications to be used for many years to come.
We are delighted to share our knowledge of Ext JS with you and hope you enjoy
this journey.
—JAY GARCIA

xv

www.it-ebooks.info


acknowledgments
The authors would like to thank the following:
■

■

■

■

■

■

The Sencha Community—Without you, this book would simply not have
been possible.

Sebastian Sterling—The publication of this book has taken a lot longer than we
anticipated. As our primary developmental editor at Manning, you challenged
our writing and helped us bring out the best content. Thank you for all of your
hard work. Thanks also to Frank Pohlman, who helped usher this book through
its final stages and hand it off to production.
The Manning production team—You guys are absolutely amazing! We feel very
fortunate to have had the opportunity to work with you, on this book as well as
our previous ones, and we value the work you’ve done through the years. Thank
you so very much!
Our MEAP (Manning Early Access Program) readers—Thank you for your helpful corrections and comments in the Author Online forum.
Our reviewers—They read the manuscript in its various stages during development and contributed insights and feedback that helped make this a better
book. Thanks to Bradley Meck, Brian Crescimanno, Brian Daley, Brian Forester,
Chad Davis, Darragh Duffy, Efran Cobisi, Jeet Marwah, John J. Ryan III, Loiane
Groner, Mary Turner, Raul Cota, Robby O’Connor, and Todd Hill.
Doug Warren—Your technical proofread and thorough review of the chapters
and the code during production has proved invaluable to us. Thank you!

xvi

www.it-ebooks.info


ACKNOWLEDGMENTS

xvii

Jay Garcia
Writing this book took a lot of effort on my part, but I certainly wouldn’t have been
able to do it without the help and contributions of others. I owe each of the following
a personal thank you:

■

■

■

■

■

■

■

My wife—Erika, this book has been in the works for a few years. When people
congratulate me, they often don’t recognize that I couldn’t have written this
book had you not provided the much-needed support for me to do so. I love
you with all of my heart and am very grateful to have you in my life.
My sons—Takeshi, Kenji: I won’t forget the constant running around the house
as I wrote this book. I thank you for your sacrificed time with me to allow me to
complete it. You boys are the reason I work so hard, and I love you very much.
Mitchell Simoens—I’m grateful to call you my friend. Watching your development both professionally and personally has been something I’ve taken great
pride in. Always remember to push the envelope with your knowledge.
Abe Elias—I have been amazed to see you evolve as you worked through the
many years with Sencha to lead a team of top-notch professional engineers.
Whenever I talk about great people, you’re one of the names that always comes
to mind. Keep staying awesome!
Grgur Grisogono—Meeting you has changed my life for the better. I’m grateful
to your friendship and look forward to many more years.
Jacob Andresen—Your contributions to this manuscript have been valuable,

and I thank you for the hard work you put in to get chapters cranked out.
Don Griffin—Thank you for allowing me to take part in conversations regarding Sencha Cmd and other Ext JS–related tools.

Grgur Grisogono
I want to thank my loving wife Andrea and kids Laurenco and Paulina for their constant support and encouragement. They provided me with the resources and the love
that I needed to generate, channel, and renew energy to write the content for this
book. I’m forever indebted to the incredible reviewers who shared their energy and
knowhow to make a much better book for the good of the community.
I would also like to extend my gratitude to Modus Create for supporting me and
granting me new challenges that have made me a better professional. Special thanks
to Sencha and its core team engineers, who have been incredibly helpful, providing
insight into the latest and greatest to make the content of this book up to date with
the most recent Ext JS and Sencha Cmd upgrades.
The most sincere appreciation is due to two of the most prominent Ext JS community members and tremendous people: my coauthors, Jesus Garcia and Jacob
Andresen. They were a tremendous team to work with, the perfect guides and reviewers, and the never-tiring locomotive that constantly pushed the project forward.

www.it-ebooks.info


xviii

ACKNOWLEDGMENTS

And finally, I’m forever indebted to my incredible friend, role model, and co-worker,
Jay G. for his amazing support, energy, and patience. His insights have been a constant
source of awe, sharp observations, and great ideas.
Jacob Andresen
First of all, I would like to thank Jesus Garcia for allowing me to tag along on the ride.
Contributing to this book has given me the opportunity to study the craft of writing
and observe how Jesus has curated the amount of technical detail that has gone into

this book. I would also like to thank Grgur Grisogono for the effort he put into this
book, as well as his work in the international Sencha community.
Speaking of the community, there is no escaping Mats Bryntse, Fredric Berling,
and Emil Pennlöv here in Scandinavia—thank you for all the good times.
Most important of all, thanks to my wife Anita for understanding why I spend all
those long nights programming.

www.it-ebooks.info


about this book
The purpose of this book is to inform and educate you about the flexible and powerful desktop framework, Ext JS. This book is designed to walk you through the basics of
using this framework all the way through to developing and deploying production
applications with Sencha Cmd. After you’ve read this book, you should be able to
develop robust desktop web applications. This revised edition covers the many new
features of Ext JS 4.0.

Who should read this book
This book is intended for developers who want to use Ext JS to create rich desktop web
applications that feel native. Although Ext JS is themed and highly customized, this
book is targeted to those who primarily perform the programming aspect of specification implementation.
We assume that you already have a working understanding of how websites interact
with web servers. To be most effective in writing robust and responsive applications,
you need a solid background with core technologies like HTML, CSS, JavaScript, and
JSON. The only time we talk in detail about these core technologies is in chapter 13,
where we discuss prototypal inheritance with JavaScript, a prerequisite to the Ext JS
class system.

What you’ll need
In the book, we’ll walk you through many hands-on examples. In order to get the

most out of them, the following items should be set up on your computer:

xix

www.it-ebooks.info


ABOUT THIS BOOK

xx
■
■
■

A web server—We recommend Apache HTTPD or Microsoft IIS.
An intelligent IDE —We recommend Webstorm or Aptana.
A copy of Sencha Cmd installed—It’s available at www.sencha.com/products/senchacmd/download.

That’s pretty much it!

Roadmap
This book is designed to give you a guided tour of Ext JS, updated for version 4.0.
Along the way, we’ll focus on many of the rich features that Ext JS provides, including
UI widgets and supportive classes such as data stores, models, and proxies. This tour
consists of 14 chapters.
Chapter 1 is an introductory chapter, focused on getting you familiar with the
framework. We’ll take a top-down view of the framework and discuss many of the commonly used widgets.
Chapter 2 is designed to get your feet wet with the framework. We’ll take a good
look at how the framework is delivered to you and identify its contents. We’ll also walk
through the basics of DOM manipulation and work our way up to using the Ext JS template engines, Template and XTemplate, to render data in the DOM.

Chapter 3 is about Component and Container, both base classes for the Ext JS UI.
We’ll discuss the component lifecycle and look at how to use Container and its utility
methods to manage and query for child components.
Chapter 4 builds on chapter 3. We’ll discuss core UI components such as panels,
windows, message boxes, and tab panels. These are all fundamental widgets that
extend Container and allow you to present your UIs with more functionality than
Container provides.
Chapter 5 covers the various layout managers that Ext JS provides, which are used
to organize components on screen. After reading this chapter, you’ll be able to construct complex user interfaces with the many Ext JS widgets.
Chapter 6 revolves around the form panel and the various input fields. We’ll look
at how to set up validations with input fields, and you’ll learn how to load and save
data with form panels.
Chapter 7 focuses on the Ext JS data package. You’ll learn about the core data
classes—Model, Proxy, Reader, and Store—all of which are used to supply data to various UI components.
Chapter 8 builds on chapter 7, and you’ll learn about the grid panel. We’ll explore
the various classes that support the grid panel, and you’ll learn to use many common
implementation patterns.
Chapter 9 is the root source for learning about Ext JS tree panels. We’ll dive into
how to use the data TreeStore class to support hierarchical data to the tree panel
widget and end the chapter with tree data manipulation via implementation of an
Ext JS menu.

www.it-ebooks.info


ABOUT THIS BOOK

xxi

Chapter 10 covers the Ext JS Draw and Charting package. You’ll draw simple

shapes as we explore how to draw on a canvas using the Ext JS Draw API. Afterward,
you’ll learn how to implement the many charts that Ext JS provides.
Chapter 11 focuses on direct web remoting with Ext JS. We’ll explore what it takes
to integrate server-side logic with the client to allow the server code to dictate API
calls to the client.
Chapter 12 covers drag-and-drop with Ext JS. We’ll look at how to implement the
basic drag-and-drop classes and then dive into using drag-and-drop with grids, trees,
and data views.
Chapter 13 focuses on the Ext JS class system. We begin by covering basic
JavaScript prototypal inheritance and elevate your knowledge up to developing Ext
JS classes. You’ll learn how to extend Ext JS components and develop plug-ins to
the framework.
Chapter 14 will take you through what it’s like to develop an application using
Sencha Cmd and the Ext JS MVC system. You’ll learn how to set up the basic application scaffolding, develop an app using MVC, and then produce testing and production builds.

Code conventions
All source code in this book is in a fixed-width font like this, which sets it off from
the surrounding text. In many listings, the code is annotated to point out the key concepts. We have tried to format the code so that it fits within the available page space in
the book by adding line breaks and using indentation carefully. Sometimes, however,
very long lines include line-continuation markers.

Getting the latest examples
The examples in this book are designed to be easy to navigate. Each chapter is its own
folder, with each example named according to the listing it corresponds to.
We’ll work to keep the examples up to date as the framework is upgraded. To
get the latest version of the examples, you can fork the following GitHub repo:
You can also download
a zip file with the code examples from the publisher’s website at www.manning.com/
ExtJSinActionSecondEdition.

Author Online
Purchase of Ext JS in Action, Second Edition includes free access to a private web
forum run by Manning Publications where you can make comments about the book,
ask technical questions, and receive help from the authors and from other users.
To access the forum and subscribe to it, point your browser to www.manning.com/
ExtJSinActionSecondEdition. This page provides information on how to get on the
forum once you’re registered, what kind of help is available, and the rules of conduct on the forum.

www.it-ebooks.info


ABOUT THIS BOOK

xxii

Manning’s commitment to our readers is to provide a venue where a meaningful
dialog between individual readers and between readers and the authors can take
place. It’s not a commitment to any specific amount of participation on the part of the
authors, whose contribution to the AO remains voluntary (and unpaid). We suggest
you ask the authors challenging questions lest their interest stray!

About the authors
Jay Garcia is CTO and cofounder of Modus Create, a company focused on delivering high-end solutions with Sencha products. Jay’s involvement with the world of
Sencha started in 2006. Since then, Jay has been focused on knowledge sharing
through books, blog articles, screencasts, meetups, and conferences. His blog is at
/>Grgur Grisogono is a principal at Modus Create and a web technology evangelist.
Grgur has been involved with Ext JS since 2007 and has successfully organized three
Sencha-focused conferences in Europe.
Jacob Andresen resides in Germany and is an Ext JS enthusiast. He works on various
projects and contributes to the community via blog posts and the Sencha forums.

www.it-ebooks.info


about the cover illustration
The figure on the cover of Ext JS in Action, Second Edition is captioned “Le voyageur,”
which means a traveling salesman. The illustration is taken from a 19th-century edition of Sylvain Maréchal’s four-volume compendium of regional dress customs published in France. Each illustration is finely drawn and colored by hand. The rich
variety of this collection reminds us vividly of how culturally apart the world’s towns
and regions were just 200 years ago. Isolated from each other, people spoke different
dialects and languages. In the streets or in the countryside, it was easy to identify
where they lived and what their trade or station in life was just by their dress.
Dress codes have changed since then and the diversity by region, so rich at the time,
has faded away. It is now hard to tell apart the inhabitants of different continents, let
alone different towns or regions. Perhaps we have traded cultural diversity for a more
varied personal life—certainly for a more varied and fast-paced technological life.
At a time when it is hard to tell one computer book from another, Manning celebrates the inventiveness and initiative of the computer business with book covers based
on the rich diversity of regional life of two centuries ago, brought back to life by illustrations from collections such as this one.

xxiii

www.it-ebooks.info


www.it-ebooks.info