You are previewing Ext JS 3.0 Cookbook.
O'Reilly logo
Ext JS 3.0 Cookbook

Book Description

Clear step-by-step recipes for building impressive rich internet applications using the Ext JS JavaScript library

  • Master the Ext JS widgets and learn to create custom components to suit your needs

  • Build striking native and custom layouts, forms, grids, listviews, treeviews, charts, tab panels, menus, toolbars and much more for your real-world user interfaces

  • Packed with easy-to-follow examples to exercise all of the features of the Ext JS library

  • Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible

In Detail

Using Ext JS you can easily build desktop-style interfaces in your web applications. Over 400,000 developers are working smarter with Ext JS and yet most of them fail to exercise all of the features that this powerful JavaScript library has to offer.

Get to grips with all of the features that you would expect with this quick and easy-to-follow Ext JS Cookbook. This book provides clear instructions for getting the most out of Ext JS with and offers many exercises to build impressive rich internet applications. This cookbook shows techniques and "patterns" for building particular interface styles and features in Ext JS. Pick what you want and move ahead.

It teaches you how to use all of the Ext JS widgets and components smartly, through practical examples and exercises. Native and custom layouts, forms, grids, listviews, treeviews, charts, tab panels, menus, toolbars, and many more components are covered in a multitude of examples.The book also looks at best practices on data storage, application architecture, code organization, presenting recipes for improving them—our cookbook provides expert information for people working with Ext JS.

Table of Contents

  1. Ext JS 3.0 Cookbook
    1. Ext JS 3.0 Cookbook
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is 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. DOM and Data Types, the Ext JS Way
      1. Introduction
      2. Detecting browsers and platforms used by clients
        1. How to do it...
          1. How it works...
          2. There's more...
      3. Retrieving DOM nodes and elements
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
      4. Acquiring references to Ext JS components
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
      5. Running high-performance DOM queries
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      6. Encoding and decoding JSON
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
      7. Encoding and decoding URL data
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      8. Determining the object type and converting empty references to a default value
        1. How to do it...
          1. How it works...
      9. Finding objects in an array and removing array items
        1. How to do it...
          1. How it works...
      10. Manipulating strings à la Ext JS
        1. How to do it...
          1. How it works...
      11. Effortless range checking for numbers
        1. How to do it...
          1. How it works...
      12. Formatting, parsing, and manipulating dates
        1. How to do it...
          1. How it works...
          2. There's more...
      13. Preventing naming conflicts and scoping non-global variables
        1. How to do it...
          1. How it works...
      14. Extending JavaScript objects, the Ext JS way
        1. How to do it...
          1. How it works...
          2. There's more...
      15. Adding features to the Ext JS classes
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      16. Building custom JavaScript classes that inherit the functionality of Ext JS
        1. How to do it...
          1. How it works...
          2. See also...
    7. 2. Laying Out a Rich User Interface
      1. Introduction
      2. Laying out items within a container using CSS-style absolute positioning
        1. How to do it...
          1. How it works...
      3. Maintaining components' proportions when their containers are resized
        1. How to do it...
          1. How it works...
          2. There's more...
      4. Stacking items with an accordion layout
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      5. Wizard style UI using a card layout
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      6. Using a tabbed look
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      7. Taking all the browser window's real estate
        1. How to do it...
          1. How it works...
          2. There's more...
      8. Positioning components in multiple columns
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      9. Using the table layout
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      10. Creating a modern application layout with collapsible regions
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      11. A custom column layout
        1. Getting ready...
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also...
      12. A three-panel application layout with a single line of code
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
      13. Creating a portal and a portlets catalog
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
    8. 3. Load, Validate, and Submit Forms
      1. Introduction
      2. Specifying the required fields in a form
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      3. Setting the minimum and maximum length allowed for a field's value
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      4. Changing the location where validation errors are displayed
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      5. Deferring field validation until form submission
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      6. Creating validation functions for URLs, email addresses, and other types of data
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      7. Confirming passwords and validating dates using relational field validation
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      8. Rounding up your validation strategy with server-side validation of form fields
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      9. Loading form data from the server
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      10. Serving the XML data to a form
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      11. Using forms for file uploads
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      12. Building friendlier forms using text hints
        1. How to do it...
        2. There's more...
        3. See also...
    9. 4. Fun with Combo Boxes and Date Fields
      1. Introduction
      2. Using the combo box with local data
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      3. Displaying remote data with a combo box
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      4. Combo box with autocomplete
        1. Getting ready...
        2. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      5. How the combo box helps you type
        1. How to do it...
          1. How it works...
          2. See also...
      6. Converting an HTML drop-down list into an Ext combo box
        1. How to do it...
          1. How it works...
          2. See also...
      7. Cascading combo boxes
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      8. Using templates to change the look of combo box items
        1. How to do it...
          1. How it works...
          2. See also...
      9. Using paging to handle a large number of combo box items
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      10. The different ways to set up disabled dates in a date field
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      11. The date range selector
        1. How to do it...
          1. How it works...
          2. See also...
    10. 5. Using Grid Panels to Display and Edit Tabular Data
      1. Introduction
      2. Displaying XML data sent by the server
        1. Getting ready...
        2. How to do it...
          1. How it works...
          2. See also...
      3. Displaying JSON data generated by the server
        1. How to do it...
          1. How it works...
          2. See also...
      4. Creating a grid that uses server-side sorting
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      5. Implementing data paging
        1. How to do it...
          1. How it works...
          2. See also...
      6. Data grouping with live group summaries
        1. How to do it...
          1. How it works...
          2. See also...
      7. Creating data previews
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      8. Creating a grid panel with expandable rows
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      9. Using checkboxes to select grid rows
        1. How to do it...
          1. How it works...
          2. There's more...
      10. Numbering rows in a grid panel
        1. How to do it...
          1. How it works...
      11. Changing grid panel data using cell editors
        1. How to do it...
          1. How it works...
          2. See also...
      12. Automatic uploading of data edited with a grid
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      13. Performing batch uploads of data edited with a grid
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      14. Changing a grid's data store and columns at runtime
        1. How to do it...
          1. How it works...
    11. 6. More Applications of Grid and List Views
      1. Introduction
      2. Creating a master-details view with a grid and a panel
        1. Getting ready...
        2. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      3. Creating a master-details view with a grid and a form
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      4. Creating a master-details view with a combo box and a grid
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      5. Creating a master-details view with two grids
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      6. Displaying large recordsets with a buffered grid
        1. How to do it...
          1. How it works...
          2. See also...
      7. Using the lightweight ListView class
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      8. Editing rows with the RowEditor plugin
        1. How to do it...
          1. How it works...
          2. See also...
      9. Adding tool tips to grid cells
        1. How to do it...
          1. How it works...
      10. Using the PropertyGrid class
        1. How to do it...
          1. How it works...
      11. Using drag-and-drop between two grids
        1. How to do it...
          1. How it works...
    12. 7. Keeping Tabs on Your Trees
      1. Introduction
      2. Handling tab activation
        1. How to do it...
          1. How it works...
          2. See also...
      3. Loading tab data with Ajax
        1. Getting ready...
        2. How to do it...
          1. How it works...
          2. See also...
      4. Adding tabs dynamically
        1. How to do it...
          1. How it works...
          2. See also...
      5. Enhancing a TabPanel with plugins: The Close menu
        1. Getting ready...
        2. How to do it...
          1. How it works...
          2. See also...
      6. Enhancing a TabPanel with plugins: The TabScroller menu
        1. Getting ready...
        2. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      7. Populating tree nodes with server-side data
        1. How to do it...
          1. How it works...
      8. Tree and panel in a master-details relationship
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      9. The multi-column TreePanel
        1. Getting ready...
        2. How to do it...
          1. How it works...
          2. There's more...
      10. Drag-and-drop between tree panels
        1. How to do it...
          1. How it works...
          2. See also...
      11. Drag-and-drop from a tree to a panel
        1. How to do it...
          1. How it works...
          2. See also...
    13. 8. Making Progress with Menus and Toolbars
      1. Introduction
      2. Placing buttons in a toolbar
        1. How to do it...
          1. How it works...
          2. See also...
      3. Working with the new ButtonGroup component
        1. How to do it...
          1. How it works...
          2. See also...
      4. Placing menus in a toolbar
        1. How to do it...
          1. How it works...
          2. See also...
      5. Commonly used menu items
        1. How to do it...
          1. How it works...
          2. See also...
      6. Embedding a progress bar in a status bar
        1. How to do it...
          1. How it works...
          2. See also...
      7. Creating a custom look for the status bar items
        1. How to do it...
          1. How it works...
          2. See also...
      8. Using a progress bar to indicate that your application is busy
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      9. Using a progress bar to report progress updates
        1. How to do it...
          1. How it works...
          2. See also...
      10. Changing the look of a progress bar
        1. How to do it...
          1. How it works...
          2. See also...
    14. 9. Well-charted Territory
      1. Introduction
      2. Setting up a line chart to display local data
        1. How to do it...
          1. How it works...
          2. See also...
      3. Setting up a line chart to display data retrieved from the server
        1. How to do it...
          1. How it works...
          2. See also...
      4. Setting up a column chart to display local data
        1. How to do it...
          1. How it works...
          2. See also...
      5. Setting up a column chart to display data retrieved from the server
        1. How to do it...
          1. How it works...
          2. See also...
      6. Displaying local data with a pie chart
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      7. Displaying remote data with a pie chart
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      8. Using a chart component to display multiple data series
        1. How to do it...
          1. How it works...
          2. See also...
      9. Creating an auto-refreshing chart
        1. How to do it...
          1. How it works...
      10. Configuring the Slider component to display a custom tip
        1. How to do it...
        2. How it works...
        3. See also...
      11. Enhancing the Slider component with custom tick marks
        1. How to do it...
          1. How it works...
          2. See also...
    15. 10. Patterns in Ext JS
      1. Introduction
      2. Sharing functionality with the Action class
        1. How to do it...
          1. How it works...
          2. There's more...
      3. Autosaving form values
        1. How to do it...
          1. How it works...
          2. There's more...
      4. Saving resources with lazy component instantiation
        1. How to do it...
          1. How it works...
      5. Extending a class
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      6. Using code modules to achieve encapsulation
        1. How to do it...
          1. How it works...
          2. There's more...
          3. See also...
      7. Implementing a publish/subscribe mechanism with relayEvents()
        1. How to do it...
          1. How it works...
          2. There's more...
      8. Augmenting a class with a plugin
        1. How to do it...
          1. How it works...
          2. See also...
      9. Building preconfigured classes
        1. How to do it...
          1. How it works...
          2. See also...
      10. Implementing state preservation with cookies
        1. How to do it...
          1. How it works...
          2. There's more...