You are previewing Ext JS Essentials.
O'Reilly logo
Ext JS Essentials

Book Description

Get up and running with building interactive and rich web applications using Sencha's Ext JS 5

In Detail

Ext JS 5 is a heavyweight JavaScript framework used by millions to build rich and interactive web applications. Its numerous widgets and advanced data package make it especially well-suited for enterprise class software. The framework encourages the creation of good architectures and is extremely customizable.

Ext JS Essentials is aimed at giving you a fast-track understanding of Ext JS. This book covers the most important aspects of the framework in a concise but comprehensive way, ensuring your success using its many features.

Written around an example application, the book is packed with practical insights into how the framework works, architecting your applications, working with data, and the many widgets on offer.

What You Will Learn

  • Set up and create your first Ext JS application

  • Model data and connect the frontend with a backend

  • Architect your applications and develop with best practices

  • Build data-driven grids to display and manipulate tabular data

  • Lay out components on screen in multiple ways

  • Visualize data with charts and drawings

  • Unit test your JavaScript applications

  • Add a custom style to your application with Ext JS themes and SASS

  • Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

    Table of Contents

    1. Ext JS Essentials
      1. Table of Contents
      2. Ext JS Essentials
      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. Getting to Know Ext JS
        1. What is Ext JS
        2. What Ext JS isn't
        3. Use cases
        4. What's new in Ext JS 5
          1. Touch support
          2. Architectural improvements
          3. Responsive layouts
          4. Component enhancements
        5. What you need to know
          1. Development environment
        6. Project introduction
        7. Creating our application with Sencha Cmd
          1. Installing Sencha Cmd
          2. Downloading the framework
          3. Applications, packages, and workspaces
          4. Generating our workspace
          5. Generating our application
        8. Getting production ready
          1. Deployment recommendations
            1. GZip
            2. Minification and concatenation
            3. Image optimization
        9. Anatomy of our application
        10. How it works
          1. The bootstrapped launch process
          2. JavaScript to HTML
          3. The event system
          4. Managing data
          5. Browser API interaction
          6. Routing
        11. Summary
      9. 2. Mastering the Framework's Building Blocks
        1. Defining classes
        2. The magic behind Ext.Loader
          1. The class definition process
          2. Defining dependencies
          3. Loader paths
          4. Ext.Loader and Sencha Cmd
          5. Our dependency root
        3. Adding class members
          1. Properties
          2. Methods
          3. Statics
          4. Statics in subclasses
          5. Singletons
        4. Extending classes
        5. Overriding classes
          1. Requiring our override class
          2. Targeting overrides to framework versions
        6. Configuring classes
          1. Setting a configuration value
          2. Overriding defaults
          3. Platform-specific configs
        7. Summary
      10. 3. Reacting to User and Application Interactions
        1. Background
        2. Defining event handlers in config objects
          1. Button handlers
          2. The on method
        3. Listener options
        4. Firing events
        5. Listening for events on elements
          1. Event delegation
        6. Mouse events
        7. Keyboard events
          1. KeyMap
        8. Touch events
          1. Event normalization
          2. Gestures
        9. Summary
      11. 4. Architecting an Ext JS Application
        1. Getting the most from Sencha Cmd
          1. Generating application components
            1. Generating models
            2. Generating views
            3. Generating controllers
          2. Upgrading your application
          3. Refreshing application metadata
          4. Triggering automatic builds
        2. MVC and MVVM
          1. What is MVC?
            1. Explaining the abbreviations
              1. Model
              2. View
              3. Controller
            2. Putting this together
            3. Ext JS naming convention and directory structure
            4. The benefits and drawbacks of using MVC
          2. What is MVVM?
            1. Addressing the concerns
            2. Explaining the abbreviations
              1. Model
              2. View
              3. ViewModel
            3. Business logic
              1. ViewControllers
              2. Controllers
        3. Cross-class communication with events
        4. Taking your application offline
          1. Why should we design offline first?
          2. What can we do about this?
          3. How can we do this?
          4. Offline architecture
          5. Syncing data
        5. Summary
      12. 5. Modeling Data Structures for Your UI
        1. Defining models
          1. Fields
          2. Field validation
          3. Custom field types
          4. Custom data converters
        2. Working with stores
          1. Simple stores
            1. Store stats
            2. Retrieving a record
            3. Finding specific records
            4. Complex searches
            5. Filtering a store
              1. Configuration-based filtering
            6. Sorting a store
              1. Configuration-based sorting
            7. Grouping
              1. Configuration-based grouping
          2. Chained stores
          3. TreeStores
            1. Ext.data.TreeModels
            2. Creating a TreeStore
            3. Populating a TreeStore
        3. Getting data into your application
          1. Ext.Ajax
            1. Simple AJAX calls
            2. Handling errors
            3. Other useful configurations
          2. Proxies
            1. AJAX proxies
            2. LocalStorage proxies
          3. REST proxies
        4. Data associations
          1. One-to-many
            1. Configuring a proxy and data source
            2. Defining the association
              1. hasMany config
            3. The reference config
            4. Exploring requests
          2. Many-to-many
            1. Configuring a proxy and data source
            2. Defining the association
            3. Loading the associated data
        5. Saving data
          1. CRUD endpoints
          2. Data writers
        6. Summary
      13. 6. Combining UI Widgets into the Perfect Layout
        1. Layouts and how they work
          1. How the layout system works
        2. The component layout
        3. Using the border layout
          1. Starting with the Viewport
          2. Configuring the border layout
        4. Using the fit layout
        5. Using the HBox layout
          1. Widths in HBox layouts
            1. Fixed width
            2. Flex width
          2. Packing items together
        6. Using the VBox layout
          1. Alignment and packing
            1. align: String
            2. pack: String
        7. Responsive layouts
          1. Ext.mixin.Responsive and Ext.plugin.Responsive
          2. ResponsiveConfig rules
        8. Summary
      14. 7. Constructing Common UI Widgets
        1. Anatomy of a UI widget
          1. Components and HTML
        2. The component lifecycle
          1. The creation lifecycle
            1. constructor
            2. Config options processed
            3. initComponent
            4. render
            5. boxready
            6. activate (*)
            7. show (*)
          2. The destruction process
            1. hide (*)
            2. deactivate (*)
            3. destroy
        3. Component Queries
          1. xtypes
          2. Sample component structure
          3. Queries with Ext.ComponentQuery
            1. Finding components based on xtype
            2. Finding components based on attributes
            3. Finding components based on itemIds
            4. Finding components based on member functions
          4. Scoped Component Queries
            1. up
            2. down
            3. query
        4. Hierarchical data with trees
          1. Binding to a data source
          2. Defining a tree panel
        5. Displaying tabular data
          1. Product data
          2. Product grid
          3. Customizing column displays
            1. Column renderers
          4. Template columns
          5. Grid widgets
        6. Inputting data with forms
          1. Defining a form
          2. Displaying our form
          3. Populating our form
          4. Persisting updates
        7. Data-bound views
          1. Defining our users' data view
            1. Store
            2. Template
            3. Item selector
          2. Styling the view
        8. Summary
      15. 8. Creating a Unique Look and Feel with SASS
        1. Applying themes to your application
          1. Configuring a new theme
        2. Creating a custom theme
          1. Theme architecture
          2. Generating a theme package
          3. Anatomy of a theme
          4. Cross-browser styling
          5. Theme inheritance
            1. Applying the new theme
        3. Basic theme customizations
          1. Theme variables
          2. Changing the main color
          3. Changing the font size
          4. Changing a button's color
        4. Custom component UIs
          1. Defining UIs
          2. Applying UIs
        5. Other UIs
        6. Summary
      16. 9. Visualizing Your Application's Data
        1. Anatomy of chart components
          1. Series
          2. Axes
          3. Labels
          4. Interactions
        2. Creating a line chart
          1. Creating the store and model
          2. Polling the server for new data
        3. Presenting data in a bar chart
        4. Creating a pie chart in Ext JS
        5. Integrating visualizations in grids
        6. Summary
      17. 10. Guaranteeing Your Code's Quality with Unit and UI Testing
        1. Writing testable JavaScript
          1. Single responsibility
          2. Accessible code
          3. Nested callbacks
          4. Separate event handlers from actions
        2. Testing frameworks
          1. Jasmine
          2. Siesta
        3. Writing unit tests
          1. Testing project structure
          2. Creating the test harness
          3. Adding the first test
          4. Executing tests
          5. Extending tests
        4. Testing UI interaction
          1. Testing cell contents
            1. Setting up expected data
            2. Checking cell contents
          2. Simulating clicks
          3. Event recorder
        5. Test automation and integration
          1. Test reports
        6. Summary
      18. Index