Learning Ext JS
eBook: $23.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 30%!
Print + free eBook + free PacktLib access to the book: $63.98    Print cover: $39.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Learn to build consistent, attractive web interfaces with the framework components.
  • Integrate your existing data and web services with Ext JS data support.
  • Enhance your JavaScript skills by using Ext's DOM and AJAX helpers.
  • Extend Ext JS through custom components.

Book Details

Language : English
Paperback : 324 pages [ 235mm x 191mm ]
Release Date : November 2008
ISBN : 1847195148
ISBN 13 : 9781847195142
Author(s) : Colin Ramsay, Shea Frederick, Steve 'Cutter' Blades
Topics and Technologies : All Books, Web Development, AJAX, Open Source

Table of Contents

Chapter 1: Getting Started
Chapter 2: The Staples of Ext
Chapter 3: Forms
Chapter 4: Buttons, Menus, and Toolbars
Chapter 5: Displaying Data with Grids
Chapter 6: Editor Grids
Chapter 7: Layouts
Chapter 8: Ext JS Does Grow on Trees
Chapter 9: Windows and Dialogs
Chapter 10: Effects
Chapter 11: Drag-and-Drop
Chapter 12: It's All about the Data
Chapter 13: Code for Reuse: Extending Ext JS
Chapter 14: The Power of Ext JS: What Else Can You Do?
  • Chapter 1: Getting Started
    • About Ext
      • Ext: Not just another JavaScript library
      • Cross-browser DOM (Document Object Model)
      • Event-driven interfaces
      • Ext and AJAX
    • Getting Ext
      • Where to put Ext
    • Including Ext in your pages
      • What do those files do?
    • Using the Ext library
      • Time for action
    • The example
    • Not working?
    • Adapters
      • Using adapters
    • I'm asynchronous!
    • Localization
      • English only
      • A language other than English
      • Multiple languages
    • Ext JS online community
    • Summary
  • Chapter 2: The Staples of Ext
    • Ready, set, go!
      • Spacer image
      • Widget
      • Time for action
    • What just happened?
    • Using onReady
    • More widget wonders
    • Meet JSON and the config object
      • The old way
      • The new way—config objects
        • What is a config object?
      • How does JSON work?
    • Time for action
    • Lighting the fire
      • The workhorse—Ext.get
      • Speed tip
    • Summary
  • Chapter 3: Forms
    • The core components of a form
    • Our first form
    • Nice form—how does it work?
    • Form fields
    • Validation
    • Built-in validation—vtypes
    • Styles for displaying errors
    • Custom validation—create your own vtype
    • Masking—don't press that key!
    • Radio buttons and check boxes
      • It's not a button, it's a radio button
      • X marks the check box
    • The ComboBox
      • Database-driven ComboBox
    • TextArea and HTMLEditor
    • Listening for form field events
      • ComboBox events
    • Buttons and form action
      • Form submission
      • Talking back—the server responses
    • Loading a form with data
      • Static data load
    • Object reference or component config
      • Instantiated
      • Component config
    • Summary
  • Chapter 4: Buttons, Menus, and Toolbars
    • A toolbar for every occasion
    • Toolbars
      • The button
      • Menu
      • Split button
      • Toolbar item alignment, dividers, and spacers
      • Shortcuts
      • Icon buttons
      • Button handlers—click me!
    • Load content on menu item click
    • Form fields in a toolbar
    • Toolbars in windows, grids, and panels
    • Summary
  • Chapter 5: Displaying Data with Grids
    • What is a grid anyway?
    • Displaying structured data with a GridPanel
      • Setting up a data store
        • Adding data to our data store
        • Defining your data for the data store
        • Specifying data types
    • Displaying the GridPanel
      • How did that work?
      • Configuring the GridPanel
    • Defining a Grids column model
    • Using cell renderers
      • Formatting data using the built-in cell renderers
      • Creating lookup data stores—custom cell rendering
      • Combining two columns
      • Generating HTML and graphics
    • Built-in features
      • Client-side sorting
      • Hidden/visible columns
      • Column reordering
    • Displaying server-side data in the grid
      • Loading the movie database from an XML file
      • Loading the movie database from a JSON file
      • Loading data from a database using PHP
    • Programming the grid
      • Working with cell and row selections
      • Listening to our selection model for selections
      • Manipulating the grid (and its data) with code
      • Altering the grid at the click of a button
    • Advanced grid formatting
      • Paging the grid
      • Grouping
      • Grouping store
    • Summary
  • Chapter 6: Editor Grids
    • What can I do with an editable grid?
    • Working with editable grids
      • Editing more cells of data
      • Edit more field types
        • Editing a date value
        • Edit with a ComboBox
      • Reacting to a cell edit
        • What's a dirty cell?
        • Reacting when an edit occurs
      • Deleting and adding in the data store
        • Removing grid rows from the data store
        • Adding a row to the grid
    • Saving edited data to the server
      • Sending updates back to the server
      • Deleting data from the server
      • Saving new rows to the server
    • Summary
  • Chapter 7: Layouts
    • What are layouts, regions, and viewports?
      • Our first layout
      • Splitting the regions
      • I want options
    • Tab panels
      • Adding a tab panel
    • Widgets everywhere
      • Adding a grid into the tabpanel
    • Accordions
      • Nesting an accordion layout in a tab
      • Placing a toolbar in your layout
      • A form to add new movies
    • Tricks and advanced layouts
      • Nested layouts
      • Icons in tabs
      • Programmatically manipulating a layout
      • Now you see me, now you don't
      • Give me another tab
    • Summary
  • Chapter 8: Ext JS Does Grow on Trees
    • Planting for the future
    • From tiny seeds...
    • Our first sapling
      • Preparing the ground
    • A tree can't grow without data
      • JSON
        • A quick word about ID
        • Extra data
      • XML
    • Tending your trees
      • Drag and drop
      • Sorting
      • Editing
    • Trimming and pruning
      • Selection models
      • Round-up with context menus
        • Handling the menu
      • Filtering
    • The roots
      • TreePanel tweaks
      • Cosmetic
      • Tweaking TreeNode
    • Manipulating
      • Further methods
    • Event capture
    • Remembering state
      • StateManager
      • Caveats
  • Summary
  • Chapter 9: Windows and Dialogs
    • Opening a dialog
    • Dialogs
      • Off the shelf
        • Confirmation
        • It's all progressing nicely
      • Roll your own
        • Behavior
    • Windows
      • Starting examples
      • Paneling potential
        • Layout
      • Configuration
        • When I'm cleaning windows
        • The extras
        • Desktopping
        • Further options
        • Framing our window
      • Manipulating
      • Events
      • State handling
    • Window management
      • Default window manager behavior
      • Multiple window example
        • Customer service WindowGroups
    • Summary
  • Fxcellent functions
    • Methodical madness
      • Fading
      • Framing
      • Woooo: ghosting
      • Highlighting
      • Huffing and puffing
      • Scaling the Ext JS heights
      • Sliding into action
      • Switching from seen to unseen
      • Shifting
    • And now, the interesting stuff
  • The Fx is in
    • Anchoring yourself with Ext
    • Options
      • Easy does it
  • Multiple effects
    • Chaining
    • Queuing
      • Concurrency
      • Blocking and Ext.Fx utility methods
  • Elemental
    • Making a move
    • Using Ext components
  • Bring out the flash
    • You're maskin', I'm tellin'
      • Data binding and other tales
      • Considering components
    • QuickTipping
  • Summary
  • Chapter 11: Drag-and-Drop
    • Drop what you're doing
    • Life's a drag
      • Sourcing a solution
        • Approximating
        • Snap!
      • Drop me off
        • But wait: Nothing's happening!
    • Interacting the fool
      • Zones of control
        • Changing our lists
    • Registering an interest
    • Extreme drag-and-drop
      • DataView dragging
      • Dealing with drag data
      • Proxies and metadata
      • Dropping in the details
    • Drag-drop groups
      • Nursing our drag-drop to health
    • It's all in the details
      • Configuration
      • It's all under control
    • Managing our movement
      • Global properties
    • Scroll management
    • Dragging within components
      • TreePanel
      • GridPanel
      • Using it in the real world
    • Summary
  • Chapter 12: It's All about the Data
    • Understanding data formats
      • Basic remote panel data
      • Gotchas with HTML data
        • Other formats
    • The data store object
      • Defining data
        • More on mapping our data
        • Pulling data into the store
    • Using a DataReader to map data
      • Using a custom DataReader
    • Getting what you want: Finding data
      • Finding data by field value
        • Finding data by record index
        • Finding data by record ID
    • Getting what you want: Filtering data
      • Remote filtering: The why and the how
  • Dealing with Recordset changes
  • Many objects take a Store
    • Store in a ComboBox
    • Store in a DataView
    • Stores in Grids
  • Summary
  • Chapter 13: Code for Reuse: Extending Ext JS
    • Object-oriented JavaScript
    • Object-oriented programming with Ext JS
      • Inheritance
      • Break it down and make it simple
      • Sounds cool, but what does it mean?
        • Now, what was this overriding stuff?
    • Understanding packages, classes, and namespaces
      • Packages
      • Classes
      • Namespaces
      • What's next?
    • Ok, what do we extend?
    • Creating a custom namespace
    • Our first custom class
    • Overriding methods
    • Understanding the order of events
      • When can we do what?
        • What is an event-driven application?
    • Creating our own custom events
    • Our first custom component: Complete
    • What's next? Breaking it down
    • Using xtype: The benefits of lazy instantiation
    • Using our custom components within other objects
    • Summary
  • Chapter 14: The Power of Ext JS: What Else Can You Do?
    • So much to work with
    • Form widgets
      • DateField
      • TimeField
      • NumberField
      • CheckboxGroups and RadioGroups
      • HtmlEditor
    • Data formatting
      • Basic string formatting
      • Formatting dates
      • Other formatting
    • Managing application state
      • Basic 'state'
      • How do I get that window?
      • Using the back button in Ext JS applications
    • Accessing the DOM
      • Finding DOM elements
      • Manipulating the DOM
      • Working with styles
    • Ext JS for the desktop: Adobe AIR
    • Ext JS community extensions
      • DatePickerPlus
      • PowerWizard
      • TinyMCE
      • SwfUploadPanel
      • ColorPicker
    • Additional resources
      • Samples and demos
      • Ext JS API
      • Ext JS forums
      • Step-by-step tutorials
      • Community manual
      • Spket IDE
      • Aptana Studio
      • Google
    • Summary
    • Where do we go from here?

Colin Ramsay

Colin Ramsay began his web career hacking around ASP websites in a part-time developer job when he was at university. Since then he's been involved with a range of web technologies, which have provided a springboard for the formation of his UK-based web development company, run in tandem with his fledgling writing projects.

Shea Frederick

Shea Frederick began his career in web development before the term 'Web Application' was commonplace. By the late 1990s, he was developing web applications for Tower Records that combined the call center interface with inventory and fulfillment. Since then, Shea has worked as a developer for several companies—building and implementing various commerce solutions, content management systems, and lead tracking programs.

Integrating new technologies to make a better application has been a driving point for Shea's work. He strives to use open source libraries as they are often the launching pad for the most creative technological advances. After stumbling upon a young user interface library called YUI-ext several years ago, Shea contributed to its growth by writing documentation, tutorials, and example code. He has remained an active community member for the modern YUI-ext library—Ext JS. Shea's expertise is drawn from community forum participation, work with the core development team, and his own experience as the architect of several large, Ext JS-based web applications. He currently lives in Baltimore, Maryland with his wife and two dogs and spends time skiing, biking, and watching the Steelers.

Shea is the primary author of the first book published on Ext JS, a book which helps to ease beginners into the Ext JS library. He is also a core developer on the Ext JS project along with writing columns for JSMag and running the local Baltimore/DC JavaScript Meetup. His ramblings can be found on his blog, http://www.vinylfox.com and open source code contributions on Github at http://www.github.com/VinylFox/.

Steve 'Cutter' Blades

Cutter is the Senior Web Developer for Dealerskins, a Nashville, Tennessee based hosting provider that develops websites for the Automobile Dealership market. Cutter began his web career when he began learning HTML 1 while in the US Army and stationed with the National Security Agency. Cutter got into application development as a Corporate Support Specialist for a regional ISP, just prior to becoming the IT Director of Seacrets, a large resort destination on the Eastern Shore of Maryland. Cutter has extensive experience as a server- and client-side developer, with a popular blog dedicated to ColdFusion, Ext JS, and other web development technologies.

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


- 15 submitted: last submission 02 Aug 2012

Errata type: Others | Page number: 13

The link to download the Ext SDK is broken. Given link: http://www.extjs.com/download Correct Link: http://www.extjs.com/products/extjs/download.php


Errata type: Others | Page number: 16

The figure accompanying the code shows title of "Hi" and a message body of "Hello World Example". The figure should display title of "Hello" and a message of "World".


Errata type: Code | Page number: 26

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


Errata type: Technical | Page number: 46

This code: { xtype: 'radio', fieldLabel: 'Filmed In', name: 'filmed_in', boxLabel: 'Color' },{ xtype: 'radio', hideLabel: false, labelSeparator: '', name: 'filmed_in', boxLabel: 'Black & White' } In this code, hideLabel: false, should be hideLabel: true,


Errata type: Language | Page number: 53

The last sentence of the first paragraph under "Buttons and form action" should read: "To do this, we ..." instead of "To do, this we ..."


Errata type: Technical | Page number: 76

The code on this page is missing a parenthesis. The code should be: var store = new Ext.data.Store({ data: [ [ 1, "Office Space", "Mike Judge", "1999-02-19", 1, "Work Sucks", "19.95", 1 ],[ 3, "Super Troopers", "Jay Chandrasekhar", "2002-02-15", 1, "Altered State Police", "14.95", 1 ] //...more rows of data removed for readability...// ], reader: new Ext.data.ArrayReader({id:'id'}, [ 'id', 'title', 'director', {name: 'released', type: 'date', dateFormat: 'Y-m-d'}, 'genre', 'tagline', 'price', 'available' ]) });


Errata type: Others | Page number: 92

This bullet point needs to be removed completely: ColumnSelectionModel: This lets the user select an entire column from the grid


Errata type: Technical | Page number: 126

This code: { region: 'center', xtype: 'tabpanel', activeTab: 0, items: [{ title: 'Movie Grid', xtype: 'gridpanel', store: store, autoExpandColumn: 'title', columns: // add column model //, view: // add grid view spec // },{ title: 'Movie Descriptions', html: 'Movie Info' }] } In this code xtype: 'gridpanel' should be: xtype: 'grid',


Errata type: Others | Page number: 129

The note: Note that the JavaScript contained within the loaded content will not be executed and any HTML will be ignored. Should be: Note that the JavaScript contained within the loaded content will not be executed.


Errata type:Others | Page number: 131

In the first paragraph, second sentence there is an extra 'used' word. The following ... or be used used to search for ... should be ... or be used to search for ...


Errata type: Typo | Page number: 191

In second to last paragraph (begins with "In many of the ...") the word discussesd should be discussed.


Errata type: Language | Page number: 56

The last line before the code should read: "This single line of code sets a field's value" instead of "This single line of code sets a fields value"


Errata type: Language | Page number: 163

In the last paragraph, this: "...but we can also weak their functionality..." should read: In the last paragraph, this: "...but we can also tweak their functionality..."


Errata type: Language | Page number: 138

In the first paragraph, this part of the sentence: "you can build a tree from first principles with a minimal of code." should read: "you can build a tree from first principles with a minimal amount of code."


Errata type: Typo | Page number: 169

The last line on the page: "of the window and crop any content that exceeds these dimensions dimensions." Should read: "of the window and crop any content that exceeds these dimensions."


Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

Learning Ext JS +    Oracle Weblogic Server 11gR1 PS2: Administration Essentials =
50% Off
the second eBook
Price for both: $40.05

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Create responsive forms
  • Look at Web Applications from an entirely new perspective
  • Learn to use the major UI components available in Ext JS
  • Understand how external data can be consumed by Ext JS
  • Query and process remote data into your application
  • Use Layouts to bring all of the Ext JS pieces together
  • Use Ext JS effects to manipulate the DOM in exciting ways
  • Provide a consistent look and feel to your application using Components
  • Change the visual style of Ext JS using theming support
  • Find Custom Community Extensions to expand your applications
  • Create your own custom library extensions

1. Getting Started
Setup Ext JS to be used on your page and troubleshoot common installation problems.

2. The Staples of Ext
Explore some of the foundational components and configuration of Ext JS.

3. Forms
Create complex forms, database-driven combo boxes, and populate form fields with data.

4. Buttons, Menus, and Toolbars
Use toolbars to create compact complex navigation for your web application.

5. Grids—Making Data Intuitive
Render database-driven grids that include paging, complex rendering, and user interaction.

6. Editor Grid
Go past the standard grid, and set up an editor grid that edits data in line.

7. In an AJAX World, You Need a Good Layout
Create a layout that provides a very flexible and attractive user interface.

8. Ext JS Does Grow on Trees
Demonstrating how to display and manipulate hierarchical data.

9. Windows and Dialogs
Focusing on displaying information in pop-up containers.

10. Effects
Add spice to your applications with compelling visual effects.

11. Drag and Drop
Learn how to move and rearrange elements within your application.

12. It's All About the Data
An introduction into the various types of data Stores, the kinds of data they can consume, how that data is defined, and how to get it.

13. Code for Reuse: Extending Ext JS
An introduction to creating custom application components by extending existing components of the framework

14. The Power of Ext JS: What Else Can You Do?
A look at many of the utility classes of the library, including formatting and state management, as well as Community Components and resources.

In Detail

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.

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.

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.

By using a series of straightforward examples backed by screenshots, Learning Ext JS will help you create web applications that look good and perform beyond the expectations of your users.


The book provides plenty of fun example code and screenshots to guide you through the creation of examples to assist with learning. By taking a chapter-by-chapter look at each major aspect of the Ext JS framework, the book lets you digest the available features in small, easily understandable, chunks, allowing you to start using the library for your development needs immediately.

Who this book is for

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 are re-vamping an existing web application, then this book is for you.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software