Cover image for Learning Ext JS

Learning Ext JS

Author Steve Cutter' Blades , Shea Frederick , Colin Ramsay
Release Date: 2008/11/01
ISBN: 9781847195142
Topic:
0%
19
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Build dynamic, desktop-style user interfaces for your data-driven web applications

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

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.

Table of Contents

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