Courier typeface is used in all code listings.Courier typeface is used within text for certain code words.
that are referenced later in the text.It was early 2006, and I was spending many frustrating hours testing and learning many of the frameworks and libraries on the internet. Seemingly, out of nowhere, I stumbled upon an extension to YUI or YUI-ext, developed by an unknown at the time, Jack Slocum.
At last! An Ajax library that was easy to use and well-documented. All of this work was for a small web application that I was developing during a six-month contract. Keep in mind that Enterprise Web 2.0 apps were nonexistent, so I knew I was venturing into uncharted territory.
By late 2006, the project had come to a close, as did the contract, forcing me to reassess my career goals. I had a strong feeling that the Enterprise Rich Intranet Application was going to be very popular, so I decided to become as active as I could in the YUI-ext community, focusing my efforts on learning, implementing, and extending the framework. You could say that I became an evangelist of sorts.
Flash forward to the summer of 2008, when Michael Stephens at Manning Publications contacted me regarding the development of a book for their In Action series. Becoming an author of a book was something that I had never dreamed of.
Before the challenge of this book was presented to me, I had already spent countless hours on the Ext JS forums helping developers like you and me solve a myriad of problems. This was in addition to authoring articles published on various blogs, e-magazine articles, and online video tutorials, some of which are longer in duration than most shows on television! So, when Michael Stephens contacted me, I was immediately excited to explore this avenue of knowledge transfer.
After about a year and a half of work, I can reflect on the late nights and sacrificed weekends spent trying to figure out ways to explain complex concepts so that any developer could understand them. During that time, I did my best to interface with the MEAP (Manning Early Access Program) readers and Ext JS community, processing feedback to make this book what it is.
I hope this book is helpful to you. Please feel free to visit us at the Manning Author Online forum and provide your thoughts, comments, and suggestions.
Ext (pronounced Eee-ecks-tee) JS 3.0 is an extremely powerful cross-browser UI framework for building rich and robust applications, originally developed by Jack Slocum in 2006. Since then, Ext JS has endured explosive growth because it addresses the need for web developers to have a true UI framework, complete with a component and event model. That makes it still unique in the growing competitive space of Web 2.0 libraries.
Written by a member of the Ext JS community, this book walks you through the framework in great detail, from the perspective of a peer-to-peer conversation. It uses examples both small and large to demonstrate how to use Ext JS effectively. It also includes many custom illustrations to help accelerate learning of the material.
Ext JS is an extremely large framework and continues to grow with every release. Because of the size of the framework, this book focuses on the core concepts that all developers need to know to be effective when developing Ext JS apps. Such concepts include the Component lifecycle, each of the layouts, creating extensions and plug-ins, and so much more.
This book does not cover parts of the framework or modules such as state and cookie management, Direct, and Designer. Cookie and state management were passed up in favor of covering other key principle topics, such as developing applications. Ext Direct is a way to remotely call the client side from the server side and also allows for seamless communication between the client and server side, but isn’t included because it requires specific knowledge of server-side languages and thus is too broad a concept for this publication. The Ext Designer application rapidly creates rich interfaces for Ext JS, but isn’t covered because it wasn’t available during the development of this book.
This book is designed for anyone who wants to learn Ext JS and use it well. Instead of just being a container for recipes, this book tries to give the reader a deep understanding of how Ext JS works from the inside out and how to apply it in their application development efforts. The examples are written so that novice and expert JavaScript developers alike find them useful.
Some skills are required to be able to understand the material in this book, however. You need to be fairly experienced with JavaScript, HTML, and CSS, though you needn’t be an expert in these technologies. If you’re charged with developing the server-side code, you should be up to speed on how to use your server-side language of choice to communicate from the web server to your database of choice.
This book is divided into five major parts, each progressively increasing in complexity.
Part 1, “Introduction to Ext JS,” gets your feet wet and lays the foundation for the rest of the book. The goal of this part is to understand the core concepts of how to use the framework well, because they’re essential for the comprehension of later parts of the book. By the end of this section, you’ll know intricacies of the framework that you can carry well beyond this book.
Chapter 1 begins with a tour of the framework. In this tour, we take a brief look at some of the underlying machinery. This chapter concludes with a “Hello world” example.
Chapter 2 is meant to be more of an Ext JS boot camp, where essential topics, such as how to initialize Ext JS widgets properly, are covered. In this chapter, we also cover DOM manipulation and how to use the framework’s template engines.
Chapter 3 closes part 1 by covering four key topics that drive the framework. These topics include event management, the Component model and lifecycle, and how Ext JS widgets manage other widgets, known as Containers.
In part 2, “Ext JS Components,” we begin to exercise the various widgets in the framework that are not driven by a data model. We start off by exploring TabPanels and Windows and then show how to properly implement each of the layouts. This part closes with a comprehensive walk-through of the various form input fields.
Chapter 4 continues the momentum from chapter 3’s concepts, exploring how TabPanels, Windows, and Ext JS MessageBox dialog boxes are used.
Chapter 5 springboards off the knowledge gained from chapter 4 and walks you through implementations of the various layout managers in the framework.
Chapter 6 is somewhat of a show-and-tell chapter, walking through each of the form input fields that the framework provides and explaining how to submit data via Ajax. In the end, it uses the layout concepts learned from chapter 5 to construct a complex multitab FormPanel.
In part 3, “Data-driven Components,” you learn the intricacies of the data-driven widgets, such as the GridPanel, EditorGridPanel, DataViews, Charts, and TreePanels. The goal of this part is to get you familiar with these complex widgets and their underlying data model components.
Chapter 7 is a detailed analysis of the way data Store GridPanels function and explains how each of their supporting classes work together.
Chapter 8 teaches you how to use the EditorGridPanel widget and introduces key concepts for creating, updating, and deleting data.
Chapter 9 leverages what you know about the data Store to implement DataViews and ListView widgets. You also learn more about the XTemplate utility along the way.
Chapter 10 is all about Charts. You get an inside look at how to implement and customize them.
Chapter 11 walks you through implementing TreePanels and explains how the data for the TreePanel needs to be arranged.
Chapter 12 is all about Toolbars, Menus, and Buttons, and you’ll learn how to create things such as custom Menus and ButtonGroups.
Part 4, “Advanced Ext,” teaches you some of the more complex areas of the framework, such as drag and drop and how to create extensions and plug-ins. Drag and drop covers a lot of material, so it’s divided into two chapters.
Chapter 13 is designed to ease you into the world of drag and drop, where you learn about the classes that make drag and drop possible with the framework. Here we implement basic drag and drop with DOM elements on the page.
Chapter 14 continues the momentum, focusing on drag and drop with the Ext JS DataView, GridPanel, and TreePanel widgets.
Chapter 15 explains how extensions and plug-ins work in the framework.
Part 5, “Building applications,” focuses on piecing together what you’ve learned thus far and constructing a small web application. In this part, you'll learn essential concepts, such as how to organize your classes via namespaces and on your filesystem. You'll also learn how to create reusable components that are implemented in your application.
Chapter 16 teaches you application basics by walking you through the paces of understanding requirements and abstracting and creating the reusable components.
Chapter 17 ties together all of the reusable components that you created in chapter 16. Here you learn how to combine user interactions using events, providing full CRUD functionality for dataRecords.
The following typographical conventions are used throughout the book:
Courier typeface is used in all code listings.Courier typeface is used within text for certain code words. that are referenced later in the text.You can download the examples for chapters 1 through 15 of this book via http://extjsinaction.com/examples.zip and can view and exercise them online via http://examples.extjsinaction.com/. The source code downloads are also available from the publisher’s website at www.manning.com/ExtJSinAction/.
The purchase of Ext JS in Action includes free access to a private forum run by Manning Publications where you can make comments about the book, ask technical questions, and receive help from the author and other users. You can access and subscribe to the forum at www.manning.com/ExtJSinAction/. 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 in the forum.
Manning’s commitment to our readers is to provide a venue where a meaningful dialogue among individual readers and between readers and the author can take place. It’s not a commitment to any specific amount of participation on the part of the author, whose contribution to the book’s forum remains voluntary (and unpaid). We suggest you try asking the author some challenging questions, lest his interest stray!
The Author Online forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print. Finally, additions to the content will be added to the author’s online blog for the book, located at http://extjsinaction.com.
By combining introductions, overviews, and how-to examples, the In Action books are designed to help learning and remembering. According to research in cognitive science, the things people remember are things they discover during self-motivated exploration.
Although no one at Manning is a cognitive scientist, we are convinced that for learning to become permanent, it must pass through stages of exploration, play, and, interestingly, retelling of what is being learned. People understand and remember new things, which is to say they master them, only after actively exploring them. Humans learn in action. An essential part of an In Action book is that it is example driven. It encourages the reader to try things out, to play with new code, and to explore new ideas.
There is another, more mundane reason for the title of this book: our readers are busy. They use books to do a job or solve a problem. They need books that allow them to jump in and jump out easily and learn just what they want, just when they want it. They need books that aid them in action. The books in this series are designed for such readers.
