If you are an Ext JS developer, it probably took you a while to learn the framework. We know that the Ext JS learning curve is not short. After we have learned the basics, and we need to use Ext JS in our daily jobs, a lot of questions pop up: how can one component talk to another? What are the best practices? Is it really worth using this approach and not any other? Is there any other way I can implement the same feature? This is normal.
This book was written keeping these developers in mind. How do we put everything together and create really nice applications with Ext JS?
So this is what this book is about. We are going to create a complete application together, from the mockup of the screens until we are able to put it into production. We are going to create the application structure, a splash screen, a login screen, multilingual capability, activity monitor, a dynamic menu that depends on users' permission, and modules to manage database information (simple and complex information). Then, we will learn how to build the application for production, as a native desktop application, to debug and test it. As an extra chapter, we will learn how to build a WordPress theme using Ext JS features.
We will use real-world examples and see how we can implement them using Ext JS components. Throughout the book we'll see a lot of tips, do this and do not do that, and best practices to help you boost your Ext JS knowledge and take you to the next level.
Chapter 1, Getting Started, introduces the application that is going to be implemented throughout the book and its features, the mockup of each screen and module (each chapter covers a different module) and also demonstrates how to create the structure of the application using the MVC architecture and how to create a splash screen.
Chapter 2, The Login Page, explains how to create a login page with Ext JS, how to handle it on the server side and also shows some extra capabilities such as adding a Caps Lock warning message, submitting the login page when pressing the Enter key, and also encrypting the password before sending to the server.
Chapter 3, Logout and Multilingual, covers how to create the logout capability and also the client-side activity monitor timeout, which is in case the user does not use the mouse or press any key on the keyboard the system will end the session automatically and it will logout. This chapter also provides a multilingual capability example and how to create a component that the user can use to change the system's language and locale settings.
Chapter 4, Advanced Dynamic Menu, is about how to create a dynamic menu that depends on user's permission. The options of the menu are rendered according to the user, if he has permission or not; if not, the option will not be displayed.
Chapter 5, User Identification and Security, explains how to create a screen to list all the users that already have access to the system and also how to create a screen to create/edit or delete an existing user and change this user's permission.
Chapter 6, MySQL Table Management, covers how to implement a module where the user will be able to edit information as if they were editing information directly from a MySQL table. This chapter also explores some capabilities such as live search, filter, inline editing (using the Cell Editing and Row Editing plugins) and also, we start exploring real-world issues when we develop big applications with Ext JS, such as reuse of components throughout the application.
Chapter 7, Content Management, explores further the complexity of managing information from a table of the database and all its relationships with other tables. So we will cover how to manage complex information, and how to handle associations within data grids and form panels.
Chapter 8, Adding Extra Capabilities, covers how to add features such as printing, export to PDF, and Excel that are not supported natively by Ext JS. This chapter also covers charts and how to export them to image and PDF and also how to use third-party plugins.
Chapter 9, The E-mail Client Module, explores how to create a screen that is based on the look and feel of Outlook, a very popular e-mail client from Microsoft. This chapter only covers how to create the screen using Ext JS; it does not cover loading or sending e-mails using any e-mail library.
Chapter 10, Preparing for Production, covers very briefly how to customize a theme using Ext JS 4.2. It also explores what are the steps, the benefits of packaging the application for production, and also how to use Desktop Packager to create native desktop applications with Ext JS.
Chapter 11, Building a WordPress Theme, steps out of the main subject that we cover in the other chapters of the book by demonstrating how to create a WordPress theme using Ext JS. This is an extra chapter and demonstrates a different approach of using Ext JS.
Chapter 12, Debugging and Testing, is about debugging Ext JS applications, what we need to be careful about and why it is very important to know how to debug. It also covers a quick look at the Siesta framework, which is a framework that can be used for testing Ext JS applications. We also briefly talk about transforming Ext JS projects into mobile apps, some helpful tools that can help us in our developer daily basis work and also some recommendations on where to find extra and open source plugins to use in Ext JS projects.
Following is a list of the software you will need to have installed beforehand to execute the examples of the book. The following is a list of the software used to implement and execute the examples of this book, but you can use any similar software that you already have installed that has the same features.
A browser with a debugger tool:
Firefox with Firebug: https://www.mozilla.org/firefox/ and http://getfirebug.com/
Google Chrome: http://www.google.com/chrome
Web server with PHP support:
Database:
MySQL Workbench: http://dev.mysql.com/downloads/tools/workbench/
MySQL Sakila sample database: http://dev.mysql.com/doc/index-other.html and http://dev.mysql.com/doc/sakila/en/index.html
Sencha command and required tools:
Sencha Cmd: http://www.sencha.com/products/sencha-cmd/download
Sass: http://sass-lang.com/
Compass: http://compass-style.org/
Java JDK: http://www.oracle.com/technetwork/java/javase/downloads/index.html
Java environment variables: http://docs.oracle.com/javase/tutorial/essential/environment/paths.html
And of course, Ext JS: http://www.sencha.com/products/extjs/
We will use Ext JS 4.2 on this book.
This book is for developers who are familiar with using Ext JS and who want to augment their skills to create even better web applications. This book will not teach you the basics of Ext JS.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "We will be adding a new CSS style to the loading DIV tag."
A block of code is set as follows:
Ext.application({ // #1
name: 'Packt', // #2
launch: function() { // #3
console.log('launch'); // #4
}
});When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
controllers: [
'Login',
'TranslationManager',
'Menu'
]Any command-line input or output is written as follows:
sencha generate theme masteringextjs-theme
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "After the application is fully loaded, the first screen the user will see is the Login screen."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.