Book Image

Learning Ext JS

By : Colin Ramsay, Shea Frederick, Steve 'Cutter' Blades
Book Image

Learning Ext JS

By: Colin Ramsay, Shea Frederick, Steve 'Cutter' Blades

Overview of this book

<p>As more and more of our work is done through a web browser, and more businesses build web rather than desktop applications, users want web applications that look and feel like desktop applications. Ext JS is a JavaScript library that makes it (relatively) easy to create desktop-style user interfaces in a web application, including multiple windows, toolbars, drop-down menus, dialog boxes, and much more. Both Commercial and Open Source licenses are available for Ext JS.<br /><br />Ext JS has the unique advantage of being the only client-side UI library that also works as an application development library. Learning Ext JS will help you create rich, dynamic, and AJAX-enabled web applications that look good and perform beyond the expectations of your users.<br /><br />From the building blocks of the application layout, to complex dynamic Grids and Forms, this book will guide you through the basics of using Ext JS, giving you the knowledge required to create rich user experiences beyond typical web interfaces. It will also provide you with the tools you need to use AJAX, by consuming server-side data directly into the many interfaces of the Ext JS component library.</p>
Table of Contents (16 chapters)
15
Index

What this book covers

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.