O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Mastering Ext JS

Book Description

In this book you’ll learn to develop a complete application with ExtJS. Enhance your existing skills and get a better grasp of the JavaScript framework to create advanced Internet applications.

  • Build an application with Ext JS from scratch
  • Learn expert tips and tricks to make your web applications look stunning
  • Create professional screens such as login, menus, grids, tree, forms, and charts.

In Detail

Ext JS 4 is a JavaScript framework that provides you with the resources to build multi-browser, high-performance, and rich Internet applications.

Mastering Ext JS is a practical, hands-on guide that will teach you how to develop a complete application with Ext JS. You’ll begin by learning how to create the project’s structure and login screen before mastering advanced level features such as dynamic menus and master-detail grids, before finally preparing the application for production.

Mastering Ext JS will help you to utilize Ext JS to its full potential and will show you how to create a complete Ext JS application from the scratch, as well as explaining how to create a Wordpress theme.

You will learn how to create user and group security, master-detail grids and forms, charts, trees, and how to export data to excel including PDF and images, always focusing on best practices.

You will also learn how to customize themes and how to prepare the application to be ready for deployment upon completion. Each chapter of the book is focused on one task and helps you understand and master an individual aspect of the application.

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

Table of Contents

  1. Mastering Ext JS
    1. Table of Contents
    2. Mastering Ext JS
    3. Credits
    4. About the Author
    5. Acknowledgement
    6. About the Reviewers
    7. www.PacktPub.com
      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. Errata
        2. Piracy
        3. Questions
    9. 1. Getting Started
      1. Installing the required software
      2. Presenting the application and its capabilities
        1. The splash screen
        2. The login screen
        3. The main screen
        4. User control management
        5. MySQL table management
        6. Content management control
        7. The e-mail client module
      3. Creating the structure of the application using MVC
        1. A quick word about MVC
        2. Creating the application
      4. Creating the loading page
      5. Summary
    10. 2. 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
        3. Running the code
        4. Using itemId versus id – Ext.Cmp is bad!
      3. Creating the login controller
        1. Adding the controller to app.js
        2. Listening to the button click event
          1. Cancel button listener implementation
          2. Submit button listener implementation
      4. Creating the User and Groups tables
      5. Handling the login page on the server
        1. Connecting to the database
        2. login.php
        3. Handling the return of the server – logged in or not?
          1. Success versus failure
      6. Enhancing the Login screen
        1. Applying a loading mask on the form while authenticating
        2. Form submit on Enter
        3. The Caps Lock warning message
      7. Summary
    11. 3. Logout and Multilingual
      1. The base of the application
      2. The logout capability
        1. Refactoring the login and logout code
        2. Handling the logout capability on the server
        3. The client-side activity monitor
      3. The multilingual capability
        1. Creating the change language component
        2. Creating the translation files
        3. Applying the translation on the application's components
        4. HTML5 local storage
        5. Handling the language change in real-time
        6. Locale – translating Ext JS
      4. Summary
    12. 4. Advanced Dynamic Menu
      1. Creating the dynamic menu
        1. The database model – groups, menus, and permissions
        2. Creating the menu models – hasMany association
        3. Creating the store – loading the menu from the server
        4. Handling the dynamic menu on the server
        5. Creating the menu with Accordion panel and Tree panel
        6. Replacing the central container on the viewport
        7. Creating the menu controller-side
          1. Rendering the menu from nested JSON (hasMany association)
          2. Opening a menu item dynamically
        8. Changing app.js
      2. Summary
    13. 5. User Identification and Security
      1. Managing users
      2. Listing all the users – simple Grid panel
        1. User model
        2. Users store
        3. Users Grid panel
        4. Users controller
      3. Adding and editing a new user
        1. Creating the edit view – a form within a window
        2. The group model
        3. The groups store
        4. The controller – listening to the add button
        5. The controller – listening to the edit button
        6. The controller – saving a user
        7. The controller – listening to the cancel button
        8. Previewing a file before uploading it
      4. Deleting a user
      5. Summary
    14. 6. MySQL Table Management
      1. Presenting the tables
      2. Creating the models
        1. Abstract model
        2. Specific models
      3. Creating the stores
        1. The Abstract Store
        2. The Abstract Proxy
        3. Specific stores
      4. Creating the menu items
      5. Creating an abstract Grid panel for reuse
        1. Handling the action column in the MVC architecture
        2. Setting iconCls instead of icon on the action column
        3. The Live Search plugin versus the Filter plugin
        4. Specific Grid panels for each table
      6. A generic controller for all tables
        1. Loading the Grid panel store when the grid is rendered
        2. Adding a new record on the Grid panel
        3. Editing an existing record
        4. Deleting – handling the action column on the controller
        5. Saving the changes
          1. autoSync configuration
        6. Canceling the changes
        7. Clearing the filter
        8. Listening to store events on the controller
      7. Summary
    15. 7. Content Management
      1. Managing information – films, clients, and rentals
      2. Displaying the Film data grid
        1. The Film model
        2. Films store
        3. Film data grid (with paging)
          1. Handling paging on the server side
            1. Paging queries on MySQL, Oracle, and Microsoft SQL Server
        4. Creating the controller
      3. Editing in the Film grid panel
        1. Packt.view.sakila.WindowForm
        2. Film categories
          1. Store
          2. Edit view
            1. The Search Add Delete toolbar
          3. Search categories – MultiSelect
            1. Packt.view.sakila.SearchWindow
        3. Film actors
          1. Store
          2. Edit view
          3. Searching for actors – live search combobox
            1. Model
            2. Store
            3. Live search combobox
      4. The films controller
        1. Loading the existing film information within the Edit form
        2. Getting the MultiSelect values
        3. Getting the selected actor from live search
      5. Summary
    16. 8. Adding Extra Capabilities
      1. Exporting the Grid panel to PDF and Excel
        1. Exporting to PDF
          1. Generating the PDF file on the server (PHP)
        2. Exporting to Excel
      2. Printing Grid panel content with the Grid printer plugin
      3. Creating the Sales by Film Category chart
        1. Pie chart
        2. Column chart
        3. The chart panel
        4. Changing the chart type
        5. Exporting charts to images (PNG and SVG)
        6. Exporting charts to PDF
      4. Summary
    17. 9. The E-mail Client Module
      1. Creating the inbox – list of e-mails
        1. The mail message model
        2. The mail messages store
        3. The mail list view
        4. The preview mail panel
      2. The mail menu (tree menu)
        1. The mail menu tree store
        2. Creating the mail menu view
      3. The mail container – organizing the e-mail client
      4. The controller
        1. Previewing an e-mail
      5. Organizing e-mails – drag-and-drop
      6. Creating a new message
        1. Dynamically displaying Cc and Bcc fields
        2. Adding the file upload fields dynamically
      7. Summary
    18. 10. Preparing for Production
      1. Before we start
      2. Customizing a theme
      3. Packaging the application for production
        1. What to deploy in production
        2. Benefits
      4. From web to desktop – Sencha Desktop Packager
        1. Installation
          1. Mac OS and Linux
          2. Windows
        2. Packaging the application
        3. Required changes on the server side
          1. Ajax versus JsonP versus CORS
      5. Summary
    19. 11. Building a WordPress Theme
      1. Before we start
      2. A brief introduction to WordPress themes
      3. Structuring our theme
      4. Building the Header
        1. Creating the Ext JS code
      5. Building the Footer
      6. Building the Main page
      7. Building the Sidebar
      8. Building the single post page
      9. Building the single page
      10. Summary
    20. 12. Debugging and Testing
      1. Debugging Ext JS applications
      2. Testing Ext JS applications
        1. Generating the "test" build with Sencha command
        2. Installing Siesta and creating test cases
      3. Helpful tools
      4. From Ext JS to mobile
      5. Third-party components and plugins
      6. Summary
    21. Index