Chapter 1 introduces you to the process of installing the required Ext JS library files, and setting up a basic page that displays an alert-style message. This provides us with a way to test whether your setup was done correctly, and whether you're ready to play with some code. We also cover how to set up other base libraries such as jQuery, YUI, and Prototype, to work in conjunction with Ext JS.

Chapter 2 covers how to interact with the web page and the user. With example code that uses simple components, we quickly start to see the level of user interactivity that Ext JS provides right out of the box. We assemble a series of dialogs that appear and modify the existing pages depending upon the users' inputs.

Chapter 3 launches us into using the first major widget—forms. We start by creating a simple form with three fields, explore the different form field types, and then add some simple validation to our form. From there we move on to creating custom validation and database-driven combo-box'es and handling form submissions.

Chapter 4 provides an overview of how to use toolbars and buttons within your application. These components are typically undervalued, yet they provide crucial user interface functions. We jump straight into creating toolbars with buttons, split buttons, and menus, along with adding mechanical elements such as spacers and dividers. Next, we cover customizing the toolbar with stylized icon buttons and form fields.

Chapter 5 covers grids—the most widely-utilized component in the Ext JS library. In this chapter, we learn how to set up a grid panel using both local and remote data, and in both in XML and JSON formats. We also discuss how to prepare different data types and how to create renderers that will style and format the data to your preference. Using the selection model and paging are among the many interesting points covered in this chapter.

Chapter 6 dives into editor grids. Here, we learn how to set up an editor grid using different form field types, and how to save changes made in the grid back to the server or database. We also discuss tactics for adding and removing rows of data to and from our data store, and the server or the database.

Chapter 7 explores the concept of using the layout component to bring all the portions of your application together into a cohesive web application. We start by using a viewport with a border layout to contain the many parts of our application. From there we are able to add other layout features such as tab panels, accordions, and toolbars. We finish up by learning how to nest layouts and make dynamic changes to the layout components.

Chapter 8 discusses the presentation of hierarchical information using the Ext JS Tree support. Using real-world examples of hierarchical data, you will discover how to display and manipulate a Tree view. You will use AJAX techniques to persist the modifications to a server and learn how to tweak the Tree to support advanced scenarios.

Chapter 9 demonstrates how Ext JS can provide attractive user prompts that can either present information or accept input. We then discuss the extension of these dialogs in the form of Ext.Window, a fully-fledged means of creating customizable pop-up windows.

In Chapter 10, we take a tour of the visual effects available in the Ext JS effects package. You will learn how to apply animations to create smooth transitions and notifications to enhance the user experience.

Chapter 11 shows how you can harness Ext.dd—the rich drag-and-drop functionality provided by Ext JS. A variety of different demonstrations allow you to understand the concepts behind Ext.dd, and how you can harness its potential within your own applications.

Chapter 12 gets straight to the heart of every application—the data. Ext JS provides several different methods for retrieving data, with each method having its own pros and cons. This chapter will help you to decide what will work for your application, with step-by-step examples to guide you on your way.

Chapter 13 shows the true power of Ext JS, providing an introduction to creating your own custom components by expanding upon Ext JS's extensible architecture. You will see how to create your own components by extending the existing framework, making pieces that you can re-use in your own applications.

Chapter 14 wraps it all up, by showing you that with Ext JS there is more than meets the eye. You will discover some of the invisible architecture that allows you to perform important tasks such as data formatting and application state management. You will also find that you have a broad array of resources at your fingertips, as we show you the rich user community that exists around the library, and introduce you to additional resources to continue your journey in Learning Ext JS.

At the ground level, this book requires the knowledge to write HTML pages by hand—if you can write an HTML document from memory in Windows Notepad (or in a good text editor) then that will be good enough. Familiarity with including external files such as style sheets and JavaScript files will also be necessary. Only a basic understanding of JavaScript, or another scripting or programming language, will be required.

One of the things that will make life easier is having access to a web server, or a local development web server such as XAMPP or something similar. The XAMPP local web server is developed by Apache Friends (www.apachefriends.org) and comes in an easy to-use install file. By default, it sets up Apache, PHP, and MySQL, which allows you to perform local web development easily. Running this book's examples from a local web server is useful and can save lots of time.

A good editor and debugger are extremely useful, particularly if they are specific to JavaScript, as Aptana is. The makers of Aptana have created a very powerful tool for developing web applications in JavaScript. Their editor can debug JavaScript, CSS, PHP, and many other languages as you type, and the best part is that you can link the editor up with your libraries and classes to get code auto-completion specific to your development. The debugger can alert you to errors in your code before you get to the browser (enable the JSLint debugger), and can suggest fixes for the errors.

The final point here is an absolute necessity—get Firefox and Firebug installed on your computer! Don't even ask why, because Firebug will soon become the program you just cannot do your job without. Soon, you will be wondering how you ever got any work done before Firebug. What it does is allows you to monitor and interact with the web page in real time. When you start working with single-page web applications and AJAX, you quickly lose the ability to look at the requests and responses for communications such as form submission. One of the things that Firebug provides you with is a way to watch and inspect this communication. The other main thing that it does is allow you to modify the HTML and JavaScript in your web page and watch these changes take effect in real time. The built-in script debugger lets us pause code execution and inspect or even modify code and variables.

Once you are set up with a local (or remote) development web server, your favorite editor and debugger, and Firefox with Firebug, you are ready to start Learning Ext JS.

This book is written for Web Application Developers who are familiar with HTML, but may have little to no experience with JavaScript application development. If you are starting to build a new web application, or you are revamping an existing web application, then this book is for you.

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "The config object used for this dialog has three elements "

A block of code is set as follows:

Ext.onReady(function(){
Ext.Msg.show({
title: 'Milton',
msg: 'Have you seen my stapler?',
buttons: {
yes: true,
no: true,
cancel: true
}
});
});

When we wish to draw your attention to a particular part of a code block, the relevant lines or items will be shown in bold:

{
xtype: 'datefield',
fieldLabel: 'Released',
name: 'released'
}

New terms and important words are introduced in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "We also have elements that can add space and vertical dividers, like the one used between the Menu and the Split buttons."

Feedback from our readers is always welcome. Let us know what you think about this book, what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply drop an email to [email protected], and mention the book title in the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.comor email [email protected].

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.