Mastering Ext JS

Mastering Ext JS
eBook: $29.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $79.98    Print cover: $49.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • 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.


Book Details

Language : English
Paperback : 358 pages [ 235mm x 191mm ]
Release Date : July 2013
ISBN : 1782164006
ISBN 13 : 9781782164005
Author(s) : Loiane Groner
Topics and Technologies : All Books, Web Development, Open Source

Table of Contents

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

                          Loiane Groner

                          Loiane Groner lives in São Paulo, Brazil and has over eight years of software development experience. While at university, she demonstrated great interest in IT. She worked as an assistant teacher for two and a half years, teaching algorithms, data structures, and computing theory. She represented her university at the ACM International Collegiate Programming Contest – Brazilian Finals (South America Regionals) and also worked as Student Delegate of SBC (Brazilian Computing Society) for two years. She won a merit award in her senior year for being one of the top three students with better GPAs in the Computer Science department and also graduated with honors. She has worked at multinational companies such as IBM. Her areas of expertise include Java SE, Java EE, and also Sencha technologies (Ext JS and Sencha Touch). She is now working as Software Development Manager at a financial institution, where she manages overseas solutions. She also works as an independent Sencha consultant and coach. Loiane is also the author of Ext JS 4 First Look and Sencha Architect App Development, Packt Publishing. She is passionate about Sencha and Java, and is the leader of CampinasJUG/SouJava Campinas (Campinas Java Users Group) and coordinator of ESJUG (Espirito Santo Java Users Group) , both Brazilian JUGs. She also contributes to the software development community through her blogs: (English) and (Portuguese-BR), where she writes about IT careers, Ext JS, Sencha Touch, Sencha Architect, Java, and general development notes and also publishes screencasts. If you want to keep in touch, you can find Loiane on Facebook ( and Twitter (@loiane).
                          Sorry, we don't have any reviews for this title yet.

                          Submit Errata

                          Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                          - 7 submitted: last submission 08 Jul 2014

                          Errata type: Others

                          There is no source code available on the Packt Publishing website for this book. You can download the source code of this book from


                          Errata type: Typo Page No.: 84

                          We need to create a new file named Translatation.js under the app/view folder:

                          This should be:

                          We need to create a new file named Translation.js under the app/view folder:


                          Errata type: Code Page no.: 54

                          Ext.define('Packt.view.Translation', {

                          extend: 'Ext.button.Split', // #2

                          alias: 'widget.translation', // #1

                          menu: Ext.create('', { // #3

                          This should be:

                          Ext.define('Packt.view.Translation', {

                          extend: 'Ext.button.Split', // #1

                          alias: 'widget.translation', // #2

                          menu: Ext.create('', { // #3

                          Errata type: Technical   Page No: 107

                          Then, on the app/view/Viewport.js file we will replace the center container  
                          with the tab panel we just created:
                          This should be:
                          Then, on the app/view/MyViewport.js file we will replace the center container  
                          with the tab panel we just created:

                          Errata type: Typo  Page No. 34

                          declare the name of the class, followed by a comma (") and curly brackets ({}),

                          should be:

                          declare the name of the class, followed by a comma (",") and curly brackets ({}),

                          Errata type: Code  Page No.: 119

                          The line in code "store: Ext.create(''), // #1" is not required as it is redundant.

                          Errata type: Code  Page No.: 81

                          The code line:


                          should be:


                          Sample chapters

                          You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                          Frequently bought together

                          Mastering Ext JS +    Oracle Data Integrator 11g Cookbook =
                          50% Off
                          the second eBook
                          Price for both: $43.05

                          Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                          What you will learn from this book

                          • Develop a content management module
                          • Handle the information on the server side, avoiding the need for JSON files
                          • Create a Wordpress theme
                          • Develop a client e-mail, groups, and security module
                          • Build the application for production
                          • Test an Ext JS application
                          • Reuse code to build the same application as a mobile app

                          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.


                          Written as a practical step-by-step tutorial, Mastering Ext JS is full of engaging examples to help you learn in a practical context

                          Who this book is for

                          Mastering Ext JS is for developers who are familiar with using Ext JS and want to take their skills to the next level by mastering Ext JS and creating even better web applications

                          Code Download and Errata
                          Packt Anytime, Anywhere
                          Register Books
                          Print Upgrades
                          eBook Downloads
                          Video Support
                          Contact Us
                          Awards Voting Nominations Previous Winners
                          Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                          Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software