You are previewing Mastering Ext JS - Second Edition.
O'Reilly logo
Mastering Ext JS - Second Edition

Book Description

Learn how to develop advanced and efficient Internet applications with Ext JS

In Detail

This book will help you to utilize Ext JS to its full potential and will show you how to create a complete Ext JS application from scratch.

You'll begin by learning how to create the project's structure, splash screen, login screen, dynamic menus, open screens dynamically and master-detail grids, and much more. You will also learn how to export data to Excel including PDFs and images, while always keeping best practices in mind.

Following this, you'll discover how to use the MVC architecture, the new MVVM. Next, you'll learn how to customize themes and how to prepare the application to be ready for deployment upon completion.

By the end of the book, you will have learned everything you need to know to truly master Ext JS and start building advanced applications.

What You Will Learn

  • Develop a splash and login screen

  • Create dynamic menus and open dynamic screens

  • Exploit master detail grids, master detail forms, trees, and charts

  • Utilize the MVC, MVVM, and hybrid architectures

  • Handle the information on the server side–no more JSON files!

  • Customize and build a theme

  • Build an application from scratch

  • 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 If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

    Table of Contents

    1. Mastering Ext JS Second Edition
      1. Table of Contents
      2. Mastering Ext JS Second Edition
      3. Credits
      4. About the Author
      5. Acknowledgments
      6. About the Reviewers
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      8. 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
      9. 1. Sencha Ext JS Overview
        1. Understanding Sencha Ext JS
          1. Architecture of Ext JS applications
        2. Ext JS overview
          1. Basic tutorial
          2. Class system
          3. Components
            1. The component hierarchy
          4. GridPanel
          5. TreePanel
          6. Forms
          7. Other components
          8. Layouts
          9. Data package
          10. The MVC and MVVM architectures
          11. Look and feel of Ext JS applications
        3. Installing Ext JS
          1. Prerequisites for Ext JS and Sencha Cmd
          2. Downloading Ext JS and Sencha Cmd
          3. Offline documentation
          4. IDE
        4. Summary
      10. 2. Getting Started
        1. Preparing the development environment
        2. Presenting the application and its capabilities
          1. The splash screen
          2. The login screen
          3. The main screen
          4. User administration
          5. MySQL table management
          6. Content management control
          7. Charts
        3. Creating the application with Sencha Cmd
          1. A quick word about MVC
          2. Creating the application
            1. Looking out for changes with the watch command
            2. Applying the first changes in our app
            3. Understanding the Application.js file
        4. Creating the loading page
        5. Summary
      11. 3. The Login Page
        1. The Login screen
        2. Creating the Login screen
          1. Client-side validations
            1. Creating custom VTypes
          2. Adding the toolbar with buttons
            1. Running the code
              1. A quick overview about Ext JS dynamic class loading
          3. Adding Font Awesome support (Glyph icons)
          4. Creating the Login Controller
            1. Introducing the MVVM architecture
            2. Creating the ViewController for Login View
              1. Binding the ViewController to the View
            3. Listening to the button click event
              1. Cancel Button Listener implementation
              2. Submit Button Listener implementation
          5. Creating the User and Groups tables
          6. Handling the Login page on the server
            1. Connecting to the database
            2. Login.php
          7. Handling the return of the server – logged in or not?
            1. Reusing code by creating a Util class
        3. Enhancing the Login screen
          1. Applying a loading mask on the form while authenticating
          2. Form submit on Enter
          3. Caps Lock warning message
        4. Summary
      12. 4. The Logout and Multilingual Capabilities
        1. The base of the application – view/main/Main.js
          1. The Viewport
            1. Using the Viewport plugin
          2. Organizing the main screen using the Border layout
            1. Creating the main TabPanel component
            2. Creating the footer
              1. A quick word about modular CSS
            3. Creating the Header class
              1. Creating the Header CSS
              2. Customizing the Font Awesome icon colors
          3. The main screen and MVVM
            1. The main ViewModel
        2. Logout capability
          1. Handling the logout on the server
          2. Ajax request success versus failure
        3. Client-side activity monitor
        4. The multilingual capability
          1. Creating the change language component
            1. Adding the CSS – country flags
            2. Using the translation component
          2. Creating the multilingual files
          3. Applying the translation on the application's components
          4. HTML5 local storage
          5. Handling change language in real time
            1. The early life of the ViewController
          6. Using locale files to translate Ext JS
        5. Summary
      13. 5. Advanced Dynamic Menu
        1. An overview of the dynamic menu
          1. Ext JS TreePanel
          2. Accordion layout
        2. The database model – groups, menus, and permissions
        3. The dynamic menu – an MVC approach
          1. Creating the models
            1. Working with the hasMany association
          2. Creating the store-loading menu from the server
          3. Handling the dynamic menu on the server
            1. Fetching the user permissions
            2. Fetching the modules the user is entitled to
            3. Fetching the menu options based on modules and permissions
          4. Creating the menu with the Accordion layout and TreePanel
          5. Creating the menu Controller
            1. Rendering the menu from nested JSON (the hasMany association)
              1. Using glyphs in TreePanel – working with overrides
              2. Menu locale support
            2. Opening a menu item programmatically
        4. Summary
      14. 6. User Management
        1. Managing users
          1. Listing all the users using a simple GridPanel
            1. Creating a User Model
              1. Working with schemas
            2. Defining store-less grids with Users GridPanel
              1. The Users screen
                1. Working with docked items
              2. Working with singletons – Ext JS class system
              3. Panel versus Container versus Component
          2. Declaring the User ViewModel
            1. Working with ViewModel data binding
          3. Creating the User ViewController
            1. Adding and editing a new user
              1. Creating the Edit View – form within a window
              2. Creating the Group Model
              3. The Groups Store
            2. Controller – listening to the Add button
            3. Controller – listening to the Edit button
            4. Controller – listening to the Cancel button
            5. Controller – saving a user
              1. Using Model validators
            6. Previewing a file before uploading
            7. Deleting a user
          4. Displaying the group name in the Grid
        2. Summary
      15. 7. Static Data Management
        1. Presenting the tables
        2. Creating a Model
          1. Abstract Model
            1. Adapting the Base Model schema
          2. Specific models
        3. Creating a Store
          1. Abstract Store
          2. Specific Store
        4. Creating an abstract GridPanel for reuse
          1. To initComponent or not?
          2. Handling the Widget Column in the MVC architecture
          3. Live Search plugin versus Filter plugin
          4. Specific GridPanels for each table
          5. Adding the Live Search CSS
        5. Generic Controller for all tables
          1. Finding the correct selector
            1. Using itemId versus id – Ext.Cmp is bad!
          2. Adding a new record on the GridPanel
          3. Editing an existing record
          4. Deleting the handling Widget Column in the Controller
          5. Saving the changes
            1. Validating cellediting in GridPanel
              1. Model validators
            2. The autoSync configuration
          6. Canceling the changes
          7. Clearing the filter
          8. Listening to Store events in the Controller
        6. Debug tip – Sencha extension for Chrome
          1. Firefox extension – Illuminations for Developers
        7. Summary
      16. 8. Content Management
        1. Managing information – films
        2. Displaying the Film data grid
          1. The Film Model
          2. Films ModelView
          3. Film data grid (with paging)
            1. Creating the Base Grid
            2. Adding the RowExpander plugin
            3. Actor-Language – handling a hasOne association
            4. Adding the PagingToolbar
              1. Handling paging on the server side
                1. Paging queries on MySQL, Oracle, and Microsoft SQL Server
        3. Creating the films container
          1. Handling many-to-many associations
            1. Loading nested JSON from the server
              1. Changing the ViewModel – chained stores
            2. Film-Actor – handling many-to-many associations
            3. Film-Category – handling many-to-many associations
        4. Creating the ViewController
          1. The base ViewController
          2. Creating the FilmsController
          3. Adding or editing a film
            1. Packt.view.base.WindowForm
            2. The films form
            3. Film categories
            4. Film Actors
              1. Search Actors – Live Search combobox
                1. Model
                2. Store
                3. Live Search combobox
          4. Complementing the ViewModel
            1. Working with formulas and two-way data binding
        5. The Films ViewController
          1. The createDialog method
          2. Getting the selected actor from Live Search
          3. Saving the form and working with sessions
            1. Custom Writer – saving associated data
            2. Saving session data manually
        6. Summary
      17. 9. Adding Extra Capabilities
        1. Exporting a GridPanel to PDF and Excel
          1. Exporting to PDF
            1. Generating the PDF file on the server – PHP
            2. Generating and viewing the PDF file with JavaScript – HTML5
          2. Exporting to Excel
        2. Printing GridPanel content with the GridPrinter plugin
        3. Creating a Sales by Film Category chart
          1. Ext JS 5 charts and terminology
          2. Adding Sencha Charts to the project
          3. Creating the Store inside the ViewModel
          4. Pie chart
          5. 3D column chart
          6. The Chart panel
          7. The ViewController
            1. Changing the chart type
            2. Exporting charts to images (PNG or JPEG)
        4. Summary
      18. 10. Routing, Touch Support, and Debugging
        1. Ext JS routing
          1. Default token
          2. Loading a Controller programmatically
          3. Handling routes
            1. Refactoring the Menu code
          4. Handling unmatched routes
          5. Handling parameters
        2. Using the responsive design plugin
        3. Enabling touch support
          1. From Ext JS to mobile
        4. Debugging Ext JS applications
        5. Testing Ext JS applications
        6. Helpful tools
        7. Third-party components and plugins
        8. Summary
      19. 11. Preparing for Production and Themes
        1. Before we start
        2. Creating a new theme
          1. Changing the base color
          2. Customizing components
            1. Some useful tips while creating new themes
          3. Creating custom UIs
            1. Applying the UI
        3. Packaging the application for production
          1. Compiling ext-locale
          2. What to deploy in production
          3. Benefits
        4. Summary
      20. Index