Learning Ext JS 3.2
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.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
  • An interactive tutorial packed with loads of example code and illustrative screenshots


Book Details

Language : English
Paperback : 432 pages [ 235mm x 191mm ]
Release Date : October 2010
ISBN : 1849511209
ISBN 13 : 9781849511209
Author(s) : Shea Frederick, Colin Ramsay, Steve 'Cutter' Blades, Nigel White
Topics and Technologies : All Books, Web Development, AJAX, Java, Open Source

Table of Contents

Chapter 1: Getting Started
Chapter 2: The Staples of Ext JS
Chapter 3: Forms
Chapter 4: Menus, Toolbars, and Buttons
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: Charting New Territory
Chapter 11: Effects
Chapter 12: Drag-and-drop
Chapter 13: Code for Reuse: Extending Ext JS
Chapter 14: Plugging In
Chapter 15: It's All About the Data
Chapter 16: Marshalling Data Services with Ext.Direct
Chapter 17: The Power of Ext JS: What Else Can You Do?
  • Chapter 1: Getting Started
    • A word about JavaScript
    • I'm asynchronous!
    • About Ext JS
      • Ext JS: not just another JavaScript library
      • Cross-browser DOM (Document Object Model)
      • Event-driven interfaces
      • Ext JS and AJAX
    • Getting Ext JS
      • Where to put Ext JS
    • Including Ext JS in our pages
      • What do those files do?
      • Spacer image
    • Using the Ext JS library
      • Time for action
    • The example
    • Using the Ext.onReady function
    • Not working?
    • Adapters
      • Using adapters
    • Localization
      • English only
      • A language other than English
      • Multiple languages
    • Ext JS online help
      • Online API docs
      • The FAQ
      • Ext JS forum
    • Summary
  • Chapter 2: The Staples of Ext JS
    • Meet the config object
      • The old way
      • The new way—config objects
        • What is a config object?
      • Widgets and classes
      • Time for action
    • What just happened?
    • More widget wonders
    • Time for (further) action
    • Lighting the fire
      • The workhorse—Ext.get
      • Minimizing memory usage
    • Can we use our own HTML?
    • Summary
  • Chapter 3: Forms
    • The core components of a form
    • Our first form
    • Nice form—how does it work?
      • Child items
    • Validation
    • Built-in validation—vtypes
    • Styles for displaying errors
    • Custom validation—creating our 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 checkbox
      • The ComboBox
      • A 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
    • DOM listeners
    • Summary
  • Chapter 4: Menus, Toolbars, and Buttons
    • What's on the menu?
      • The menu's items
    • A toolbar for every occasion
      • Button configuration
      • A basic button
      • Button with a menu
      • Split button
      • Toggling button state
      • Toolbar item alignment, dividers, and spacers
      • Shortcuts
      • Icon buttons
      • Button events and handlers—click me!
    • Loading content on menu item click
      • Form fields in a toolbar
    • Buttons don't have to be in a toolbar
      • Toolbars in panels
    • Toolbars unleashed
    • Summary
  • Chapter 5: Displaying Data with Grids
    • What is a grid anyway?
    • A GridPanel is databound
    • The record definition
    • The Reader
      • ArrayReader
      • JsonReader
      • XmlReader
        • Loading our data store
    • Displaying structured data with a GridPanel
      • Converting data read into the store
    • Displaying the GridPanel
      • How did that work?
    • Defining a grid's column model
      • Built-in column types
        • BooleanColumn
        • DateColumn
        • NumberColumn
        • TemplateColumn
        • ActionColumn
    • 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
        • Editing 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
    • RowEditor plugin
      • Writable store
    • Summary
  • Chapter 7: Layouts
    • What is a layout manager?
    • So what layouts are available?
      • AbsoluteLayout
      • AccordionLayout
      • AnchorLayout
      • BorderLayout
      • CardLayout
      • ColumnLayout
      • FitLayout
      • FormLayout
      • HBoxLayout
      • TableLayout
      • VBoxLayout
    • A dynamic application layout
    • Our first Viewport
    • Nesting: child components may be Containers
    • Accordion layout
    • A toolbar as part of the layout
    • Using a FormPanel in the layout
    • AnchorLayout
    • More layouts
    • Vbox layout
    • Hbox layout
    • Dynamically changing components
    • Adding new components
    • 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
  • Chapter 10: Charting New Territory
    • Just another component
      • What the flash?
      • A slice of data—pie charts
      • Chart in a layout
      • Pie chart setup
    • Styling the pie slices
    • Bar and column charts
      • From bar to column
      • Add some style
      • Stack them across
      • Get to the stacking
      • Charting lines
    • Tooltips
    • A real world example
      • Dynamically changing the data store
      • Programatically changing the styles
    • Summary
  • Chapter 11: Effects
    • It's elementary
      • Fancy features
      • It's OK to love
    • 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
    • Reveal all
      • You're maskin', I'm tellin'
        • Data binding and other tales
        • Considering components
      • QuickTipping
    • Summary
  • Chapter 12: 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 13: Code for Reuse: Extending Ext JS
    • 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: Plugging In
    • What can we do?
    • How it works
      • Using a plugin
      • Plugin structure
    • First signs of life
    • The search form
    • Interacting with the host
    • Configurable plugins
    • Extra credit
    • Summary
  • Chapter 15: It's All About the Data
    • Understanding data formats
      • Loading HTML into a panel
      • Gotchas with remote 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
    • Writing 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
    • Taking changes further: the DataWriter
    • Many objects use a Store
      • Store in a ComboBox
      • Store in a DataView
      • Stores in grids
    • Summary
  • Chapter 16: Marshalling Data Services with Ext.Direct
    • What is Direct?
    • Building server-side stacks
      • Configuration
        • Programmatic
        • JSON and XML
        • Metadata
        • Stack deconstruction—configuration
      • Building your API
        • Stack deconstruction—API
      • Routing requests
        • What is a Router
    • Putting the pieces together
      • Make your API available
      • Making API calls
    • Summary
  • Chapter 17: 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 management
      • 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
    • Where do we go from here?
    • Summary

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/.

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.

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.

Nigel White

Nigel White has 20 years of experience in the IT industry. He has seen computer systems evolve from batch processing, back room behemoths which dictated user behavior into distributed, user-centered enablers of everyday tasks.

Nigel has been working with rich Internet applications, and dynamic browser updating techniques since before the term "Ajax" was coined.

Recently he collaborated with Jack Slocum in the germination of the ExtJS project, and has contributed code, documentation, and design input to the ExtJS development team.

Nigel works as a software architect at Forward Computers where he oversees development of both the Java server tier and the browser interface of the company's evolving web UI.

He also runs Animal Software, a one man consultancy specializing in ExtJS UI development, consulting, and training.

Work displacement activities include rock climbing and bicycling!

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.


- 1 submitted: last submission 04 Apr 2012

Errata type: Technical | Page number: 33 | Errata date: 30 Dec 11

milton-icon {

should be

.milton-icon {


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 3.2 +    Zen Cart: E-commerce Application Development =
50% Off
the second eBook
Price for both: £18.00

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
  • Build great-looking and friendly forms by using client and server-side field validation, form loading, submission, field customization, and layout techniques
  • 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
  • Create bar charts, linear charts, and pie charts using the chart widget to display information in a very simple way
  • Find Custom Community Extensions to expand your applications
  • Create your own custom library extensions


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. Yet, most web developers fail to use this amazing library to its full power.

This book covers all of the major features of the Ext framework using interactive code and clear explanation coupled with loads of screenshots. 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 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. You will also learn how to use all of the Ext JS widgets and components smartly, through interactive examples.By using a series of straightforward examples backed by screenshots, Learning Ext JS 3.2 will help you create web applications that look good and perform beyond the expectations of your users.

An example-led guide to instantly create impressive, rich internet applications using the Ext JS framework


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