You are previewing Ext JS 4 Web Application Development Cookbook.
O'Reilly logo
Ext JS 4 Web Application Development Cookbook

Book Description

Whether you’re a newcomer or well versed in Ext JS, this cookbook will increase your skills and enable you to create interactive, cross-platform web applications using Sencha’s latest JavaScript framework. Packed with recipes and examples.

  • Learn how to build Rich Internet Applications with the latest version of the Ext JS framework in a cookbook style

  • From creating forms to theming your interface, you will learn the building blocks for developing the perfect web application

  • Easy to follow recipes step through practical and detailed examples which are all fully backed up with code, illustrations, and tips

  • In Detail

    Ext JS 4 is Sencha’s latest JavaScript framework for developing cross-platform web applications. Built upon web standards, Ext JS provides a comprehensive library of user interface widgets and data manipulation classes to turbo-charge your application’s development. Ext JS 4 builds on Ext JS 3, introducing a number of new widgets and features including the popular MVC architecture, easily customisable themes and plugin-free charting.

    Ext JS 4 Web Application Development Cookbook works through the framework from the fundamentals to advanced features and application design. More than 130 detailed and practical recipes demonstrate all of the key widgets and features the framework has to offer. With this book, and the Ext JS framework, learn how to develop truly interactive and responsive web applications.

    Starting with the framework fundamentals, you will work through all of the widgets and features the framework has to offer, finishing with extensive coverage of application design and code structure.

    Over 130 practical and detailed recipes describe how to create and work with forms, grids, data views, and charts. You will also learn about the best practices for structuring and designing your application and how to deal with storing and manipulating data. The cookbook structure is such that you may read the recipes in any order.

    The Ext JS 4 Web Application Development Cookbook will provide you with the knowledge to create interactive and responsive web applications, using real life examples.

    Table of Contents

    1. Ext JS 4 Web Application Development Cookbook
      1. Table of Contents
      2. Ext JS 4 Web Application Development Cookbook
      3. Credits
      4. About the Authors
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      7. 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
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Classes, Object-Oriented Principles and Structuring your Application
        1. Introduction
        2. Creating custom classes using the new Ext JS class system
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        3. Using inheritance in your classes
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        4. Adding mixins to your class
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        5. Scoping your functions
          1. What is Scope?
          2. Scope and Ext JS
          3. How to do it...
          4. How it works...
          5. There's more...
          6. See also
        6. Dynamically loading Ext JS classes
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        7. Aliasing your components
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        8. Accessing components with component query
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Evaluating a component instance's type
            2. Ext.container.AbstractContainer ComponentQuery methods
            3. Using and creating the pseudo-selectors
          5. See also
        9. Extending Ext JS components
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        10. Overriding Ext JS' functionality
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Ext.Base.callParent
            2. Ext.Base.borrow
            3. Ext.Base.implement
          4. See also
      9. 2. Manipulating the Dom, Handling Events, and Making AJAX Requests
        1. Introduction
        2. Selecting DOM elements
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Ext.select
            2. Ext.query
          4. See also
        3. Traversing the DOM
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Direct parents and children
            2. Multiple level traversal
          5. See also
        4. Manipulating DOM elements
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Showing and hiding an element
            2. Updating the contents of an element
          5. See also
        5. Creating new DOM elements
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Inserting a new element before or after an existing element
            2. Using templates to insert elements
          5. See also
        6. Handling events on elements and components
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Defining multiple event handlers at once
            2. Defining event handlers in config objects
          5. See also
        7. Delegating event handling of child elements
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        8. Simple animation of elements
          1. How to do it...
          2. How it works...
          3. See also
        9. Custom animations
          1. How to do it...
          2. How it works...
          3. There's more...
            1. easing
            2. iterations
            3. beforeanimate and afteranimate events
            4. keyframe event
          4. See also
        10. Parsing, formatting, and manipulating dates
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        11. Loading data with AJAX
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. POST JSON or XML data
            2. Disabling client-side caching of Ajax requests
            3. Use Ext.data.JsonP for cross-domain
          5. See also
        12. Encoding and decoding JSON data
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
      10. 3. Laying Out Your Components
        1. Introduction
        2. Using a FitLayout to expand components to fill their parent
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        3. Creating flexible vertical layouts with VBoxes
          1. How to do it...
          2. How it works...
          3. There's more...
            1. align: String
            2. pack: String
          4. See also
        4. Creating flexible horizontal layouts with HBoxes
          1. How to do it...
          2. How it works...
          3. There's more...
            1. align: String
            2. pack: String
          4. See also
        5. Displaying content in columns
          1. How to do it...
          2. How it works...
          3. See also
        6. Collapsible layouts with accordions
          1. How to do it...
          2. How it works...
          3. See also
        7. Displaying stacked components with CardLayouts
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        8. Anchor components to their parent's dimensions
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        9. Creating fullscreen applications with the BorderLayout
          1. How to do it...
          2. How it works...
          3. See also
        10. Combining multiple layouts
          1. How to do it...
          2. How it works...
          3. See also
      11. 4. UI Building Blocks—Trees, Panels, and Data Views
        1. Introduction
        2. Loading a tree's nodes from the server
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Sorting tree nodes
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Complex and custom sorting
            2. Sorting by multiple fields
            3. Sorting on demand
          4. See also
        4. Dragging-and-dropping nodes within a tree
          1. How to do it...
          2. How it works...
          3. See also
        5. Using a tree as a menu to load content into another panel
          1. How to do it...
          2. How it works...
          3. See also
        6. Docking items to panels' edges
          1. How to do it...
          2. How it works...
          3. There's more…
        7. Displaying a simple form in a window
          1. How to do it...
          2. How it works...
          3. See also
        8. Creating a tabbed layout with tooltips
          1. How to do it...
          2. How it works...
          3. See also
        9. Manipulating a tab panel's TabBar
          1. How to do it...
            1. Configure a tab with an icon
            2. Dynamically switch icons
            3. Set tabs' widths
            4. Change the position of the tab bar
            5. Show and hide tabs on the fly
          2. How it works...
        10. Executing inline JavaScript to in an XTemplate customize appearance
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        11. Creating Ext.XTemplate member functions
          1. How to do it...
          2. How it works...
          3. There's more...
        12. Adding logic to Ext.XTemplates
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
        13. Formatting dates within an Ext.XTemplate
          1. How to do it...
          2. How it works...
          3. See also
        14. Creating a DataView bound to a data store
          1. How to do it...
          2. How it works...
          3. See also
        15. Displaying a detailed window after clicking a DataView node
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. itemcontextmenu
            2. itemdblclick
            3. selectionchange
          5. See also
      12. 5. Loading, Submitting, and Validating Forms
        1. Introduction
        2. Constructing a complex form layout
          1. How to do it...
          2. How it works...
          3. See also
        3. Populating your form with data
          1. Getting ready
          2. How to do it...
            1. Populating individual fields
            2. Populating the entire form
          3. How it works...
          4. There's more...
            1. Populating a form from a Model instance
            2. Populating a form directly from the server
          5. See also
        4. Submitting your form's data
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Submitting a form from a Model instance
          5. See Also
        5. Validating form fields with VTypes
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        6. Creating custom VTypes
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        7. Uploading files to the server
          1. Getting Ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. buttonOnly: Boolean
            2. buttonText: String
            3. buttonConfig: Object
          5. See also
        8. Handling exception and callbacks
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Handling form population failures
            2. An alternative to CLIENT_INVALID
          5. See also
      13. 6. Using and Configuring Form Fields
        1. Introduction
        2. Displaying radio buttons in columns
          1. How to do it...
          2. How it works...
          3. See Also
        3. Populating CheckboxGroups
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        4. Dynamically generate a CheckboxGroup from JSON
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        5. Setting up available date ranges in Date fields
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Disabling specific dates
            2. Disabling specific days
            3. Advanced Date Disabling with Regular Expressions
          4. See Also
        6. Loading and parsing Dates into a Date field
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        7. Entering numbers with a Spinner field
          1. How to do it...
          2. How it works...
          3. There's More…
          4. See Also
        8. Sliding values using a Slider field
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Defining Multiple Thumbs
            2. Reacting to a thumb being dragged
          4. See Also
        9. Loading server side data into a combobox
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        10. Autocompleting a combobox's value
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Increasing autocomplete response time
            2. Defining the minimum characters before autocompleting
            3. Removing the combobox's trigger button
          4. See Also
        11. Rendering the results in a combobox
          1. How to do it...
          2. How it works...
          3. See Also
        12. Rich editing with an HTML field
          1. How to do it...
          2. How it works...
        13. Creating repeatable form fields and fieldsets
          1. How to do it...
          2. How it works...
        14. Combining form fields
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      14. 7. Working with the Ext JS Data Package
        1. Introduction
        2. Modeling a data object
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Setting the Model's uniquely identifying property
            2. Parsing date fields correctly
            3. Processing a field's data before loading
          4. See also
        3. Loading and saving a Model using proxies
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Loading cross-domain data with a Store
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        5. Associating Models and loading nested data
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
            1. Ext.data.association.HasOne
          5. See also
        6. Applying validation rules to Models' fields
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Other built-in validators
            2. Creating a custom validator
            3. Accessing error details
          4. See also
        7. Grouping a Store's data
          1. Getting ready
          2. How to do it...
          3. How it works...
            1. Extracting Records from XML
            2. Field Mapping
          4. There's more...
          5. See also
        8. Handling Store exceptions
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Add a generic response handler to all AJAX proxies
            2. Ext.data.proxy.Server's afterRequest method
          5. See also
        9. Saving and loading data with HTML5 Local Storage
          1. How to do it...
          2. How it works...
          3. See also
      15. 8. Displaying and Editing Tabular Data
        1. Introduction
        2. Displaying simple tabular data
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Editing grid data with a RowEditor
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Editing grid data with a celleditor
          5. See also
        4. Adding a paging toolbar for large datasets
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Dealing with large datasets with an infinite scrolling grid
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's More…
          5. See also
        6. Dragging-and-dropping records between grids
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Updating a row's data after dropping
            2. Allowing rows to be reordered with drag-and-drop
          5. See also
        7. Creating a grouped grid
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Making use of the grouping feature events and methods
          5. See also
        8. Custom rendering of grid cells with TemplateColumns
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        9. Creating summary rows aggregating the grid's data
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Summary data in a grouping grid
        10. Displaying full-width row data with the RowBody feature
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        11. Adding a context menu to grid rows
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        12. Populating a form from a selected grid row
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        13. Adding buttons to grid rows with action columns
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Change the icon dynamically
            2. Prevent the column appearing in the hide/show column menu
          5. See Also
      16. 9. Constructing Toolbars with Buttons and Menus
        1. Introduction
        2. Creating a split button
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Removing the default action and always showing the menu
            2. Using the Ext.button.Cycle component
        3. Working with context menus
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Adding a combobox to a toolbar to filter a grid
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        5. Using the color picker in a menu
          1. How to do it...
          2. How it works...
          3. There's more…
      17. 10. Drawing and Charting
        1. Introduction
        2. Drawing basic shapes
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        3. Applying gradients to shapes
          1. How to do it...
          2. How it works...
          3. See also
        4. Drawing paths
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        5. Transforming and interacting with shapes
          1. How to do it...
          2. How it works...
          3. There's more...
        6. Creating a bar chart with external data
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Creating a pie chart with local data
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Highlight each slice as users hover
            2. Scaling the slices in line with their magnitude
        8. Creating a line chart with updating data
          1. Getting ready...
          2. How to do it...
          3. How it works...
          4. See also
        9. Customizing labels, colors, and axes
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Creating a bespoke theme
          5. See also
        10. Attaching events to chart components
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        11. Creating a live updating chart bound to an editable grid
          1. How to do it...
          2. How it works...
          3. See also
      18. 11. Theming your Application
        1. Introduction
        2. Compiling SASS with Compass
          1. Getting ready
            1. What is SASS?
            2. What is Compass?
          2. How to do it...
          3. How it works...
          4. See also
        3. Introduction to SASS
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        4. Using Ext JS' SASS variables
          1. Getting ready
          2. How to do it...
            1. $base-color
            2. $font-size and $font-family
            3. Widgets
          3. How it works...
          4. See also
        5. Using the UI config option
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        6. Creating your own theme mixins
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Restyling a panel
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        8. Creating images for legacy browsers
          1. Getting ready
          2. How to do it...
          3. How it works...
      19. 12. Advanced Ext JS for the Perfect App
        1. Introduction
        2. Advanced functionality with plugins
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. See also
        3. Architecting your applications with the MVC pattern
          1. Getting ready
          2. How to do it...
          3. How it works…
          4. See Also
        4. Attaching user interactions to controller actions
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        5. Creating a real-life application with the MVC pattern
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        6. Building your application with Sencha's SDK tools
          1. Getting ready
          2. How to do it...
          3. How it works...
        7. Getting started with Ext Direct
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        8. Loading and submitting forms with Ext Direct
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        9. Handling errors throughout your application
          1. How to do it...
          2. How it works...
          3. See also
      20. Index