You are previewing Learning Ext JS 3.2.
O'Reilly logo
Learning Ext JS 3.2

Book Description

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

  • 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

  • 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

    Table of Contents

    1. Learning Ext JS 3.2
      1. Learning Ext JS 3.2
      2. Credits
      3. About the Authors
      4. About the Reviewers
      5. Preface
        1. What this book covers
        2. Who this book is for
        3. Conventions
        4. Reader feedback
        5. Customer support
          1. Errata
          2. Piracy
          3. Questions
      6. 1. Getting Started
        1. A word about JavaScript
        2. I'm asynchronous!
        3. About Ext JS
          1. Ext JS: not just another JavaScript library
          2. Cross-browser DOM (Document Object Model)
          3. Event-driven interfaces
          4. Ext JS and AJAX
        4. Getting Ext JS
          1. Where to put Ext JS
        5. Including Ext JS in our pages
          1. What do those files do?
          2. Spacer image
        6. Using the Ext JS library
          1. Time for action
        7. The example
        8. Using the Ext.onReady function
        9. Not working?
        10. Adapters
          1. Using adapters
        11. Localization
          1. English only
          2. A language other than English
          3. Multiple languages
        12. Ext JS online help
          1. Online API docs
          2. The FAQ
          3. Ext JS forum
        13. Summary
      7. 2. The Staples of Ext JS
        1. Meet the config object
          1. The old way
          2. The new way—config objects
            1. What is a config object?
          3. Widgets and classes
          4. Time for action
        2. What just happened?
        3. More widget wonders
        4. Time for (further) action
        5. Lighting the fire
          1. The workhorse—Ext.get
          2. Minimizing memory usage
        6. Can we use our own HTML?
        7. Summary
      8. 3. Forms
        1. The core components of a form
        2. Our first form
        3. Nice form—how does it work?
          1. Child items
        4. Validation
        5. Built-in validation—vtypes
        6. Styles for displaying errors
        7. Custom validation—creating our own vtype
        8. Masking—don't press that key!
        9. Radio buttons and check boxes
          1. It's not a button, it's a radio button
          2. X marks the checkbox
          3. The ComboBox
          4. A database-driven ComboBox
        10. TextArea and HTMLEditor
        11. Listening for form field events
          1. ComboBox events
        12. Buttons and form action
          1. Form submission
          2. Talking back—the server responses
        13. Loading a form with data
          1. Static data load
        14. DOM listeners
        15. Summary
      9. 4. Menus, Toolbars, and Buttons
        1. What's on the menu?
          1. The menu's items
        2. A toolbar for every occasion
          1. Button configuration
          2. A basic button
          3. Button with a menu
          4. Split button
          5. Toggling button state
          6. Toolbar item alignment, dividers, and spacers
          7. Shortcuts
          8. Icon buttons
          9. Button events and handlers—click me!
        3. Loading content on menu item click
          1. Form fields in a toolbar
        4. Buttons don't have to be in a toolbar
          1. Toolbars in panels
        5. Toolbars unleashed
        6. Summary
      10. 5. Displaying Data with Grids
        1. What is a grid anyway?
        2. A GridPanel is databound
        3. The record definition
        4. The Reader
          1. ArrayReader
          2. JsonReader
          3. XmlReader
            1. Loading our data store
        5. Displaying structured data with a GridPanel
          1. Converting data read into the store
        6. Displaying the GridPanel
          1. How did that work?
        7. Defining a grid's column model
          1. Built-in column types
            1. BooleanColumn
            2. DateColumn
            3. NumberColumn
            4. TemplateColumn
            5. ActionColumn
        8. 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
        9. Built-in features
          1. Client-side sorting
          2. Hidden/visible columns
          3. Column reordering
        10. 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
        11. 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
        12. Advanced grid formatting
          1. Paging the grid
          2. Grouping
          3. Grouping store
        13. 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. Editing 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. RowEditor plugin
          1. Writable store
        5. Summary
      12. 7. Layouts
        1. What is a layout manager?
        2. So what layouts are available?
          1. AbsoluteLayout
          2. AccordionLayout
          3. AnchorLayout
          4. BorderLayout
          5. CardLayout
          6. ColumnLayout
          7. FitLayout
          8. FormLayout
          9. HBoxLayout
          10. TableLayout
          11. VBoxLayout
        3. A dynamic application layout
        4. Our first Viewport
        5. Nesting: child components may be Containers
        6. Accordion layout
        7. A toolbar as part of the layout
        8. Using a FormPanel in the layout
        9. AnchorLayout
        10. More layouts
        11. Vbox layout
        12. Hbox layout
        13. Dynamically changing components
        14. Adding new components
        15. 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. Charting New Territory
        1. Just another component
          1. What the flash?
          2. A slice of data—pie charts
          3. Chart in a layout
          4. Pie chart setup
        2. Styling the pie slices
        3. Bar and column charts
          1. From bar to column
          2. Add some style
          3. Stack them across
          4. Get to the stacking
          5. Charting lines
        4. Tooltips
        5. A real world example
          1. Dynamically changing the data store
          2. Programatically changing the styles
        6. Summary
      16. 11. Effects
        1. It's elementary
          1. Fancy features
          2. It's OK to love
        2. 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
        3. The Fx is in
          1. Anchoring yourself with Ext
          2. Options
            1. Easy does it
        4. Multiple effects
          1. Chaining
          2. Queuing
            1. Concurrency
            2. Blocking and Ext.Fx utility methods
        5. Elemental
          1. Making a move
          2. Using Ext components
        6. Reveal all
          1. You're maskin', I'm tellin'
            1. Data binding and other tales
            2. Considering components
          2. QuickTipping
        7. Summary
      17. 12. 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
      18. 13. Code for Reuse: Extending Ext JS
        1. 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?
        2. Understanding packages, classes, and namespaces
          1. Packages
          2. Classes
          3. Namespaces
          4. What's next?
        3. Ok, what do we extend?
        4. Creating a custom namespace
        5. Our first custom class
        6. Overriding methods
        7. Understanding the order of events
          1. When can we do what?
            1. What is an event-driven application?
        8. Creating our own custom events
        9. Our first custom component: complete
        10. What's next? Breaking it down
        11. Using xtype: the benefits of lazy instantiation
        12. Using our custom components within other objects
        13. Summary
      19. 14. Plugging In
        1. What can we do?
        2. How it works
          1. Using a plugin
          2. Plugin structure
        3. First signs of life
        4. The search form
        5. Interacting with the host
        6. Configurable plugins
        7. Extra credit
        8. Summary
      20. 15. It's All About the Data
        1. Understanding data formats
          1. Loading HTML into a panel
          2. Gotchas with remote 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
        4. Using a custom DataReader
        5. Writing a custom DataReader
        6. Getting what you want: finding data
          1. Finding data by field value
            1. Finding data by record index
            2. Finding data by record ID
        7. Getting what you want: filtering data
          1. Remote filtering: the why and the how
        8. Dealing with Recordset changes
        9. Taking changes further: the DataWriter
        10. Many objects use a Store
          1. Store in a ComboBox
          2. Store in a DataView
          3. Stores in grids
        11. Summary
      21. 16. Marshalling Data Services with Ext.Direct
        1. What is Direct?
        2. Building server-side stacks
          1. Configuration
            1. Programmatic
            2. JSON and XML
            3. Metadata
            4. Stack deconstruction—configuration
          2. Building your API
            1. Stack deconstruction—API
          3. Routing requests
            1. What is a Router
              1. Transactions
              2. Stack deconstruction—HTTP post transaction
              3. Form transactions
              4. Stack deconstruction—form transactions
              5. Response
              6. Stack deconstruction—JSON HTTP response
              7. Stack deconstruction—form post response
              8. Exception responses
              9. Stack deconstruction—exceptions
        3. Putting the pieces together
          1. Make your API available
          2. Making API calls
        4. Summary
      22. 17. 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 management
          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. Where do we go from here?
        10. Summary