Mastering Ext Js - Second Edition - Sample Chapter 6jj24

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.

What you will learn from this book

You'll begin by learning how to create the project's structure, splash screen, 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.

 Develop a splash and screen

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.

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

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.

 Create dynamic menus and open dynamic screens

Mastering Ext JS

Second Edition

Second Edition

Mastering Ext JS

 Utilize the MVC, MVVM, and hybrid architectures

C o m m u n i t y

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

 Customize and build a theme

Mastering Ext JS

 Build an application from scratch

Second Edition

Who this book is written for

$ 49.99 US £ 30.99 UK "Community Experience Distilled"

Loiane Groner

If you are a developer who is familiar with Ext JS and want to augment your skills to create even better web applications, this is the book for you. Basic knowledge of JavaScript/HTML/CSS and any server-side language (PHP, Java, C#, Ruby, or Python) is required.

E x p e r i e n c e

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

Prices do not include local sales tax or VAT where applicable

Visit www.PacktPub.com for books, eBooks, code, s, and PacktLib.

D i s t i l l e d

Loiane Groner

In this package, you will find:    

The author biography A preview chapter from the book, Chapter 1 "Sencha Ext JS Overview" A synopsis of the book’s content More information on Mastering Ext JS Second Edition

About the Author Loiane Groner has over 9 years of experience in software development. While at university, she demonstrated great interest in IT. Loiane worked as a teaching assistant for 2.5 years and taught 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 a student delegate of the Brazilian Computing Society (SBC) for 2 years. Loiane won a merit award in her senior year for being one of the top three students with the best GPAs in the computer science department and also graduated with honors. Loiane has worked at multinational companies, such as IBM. Her areas of expertise include Java SE and Java EE and also Sencha technologies (Ext JS and Sencha Touch). Nowadays, Loiane works as a 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, Mastering Ext JS, Sencha Architect App Development, and Learning JavaScript Data Structure and Algorithms, all published by Packt Publishing. She is ionate about Sencha and Java; she is a leader of Campinas Java s Group (CampinasJUG) and a coordinator of Espirito Santo Java s Group (ESJUG), both Brazilian JUGs.

Loiane also contributes to the software development community through her blogs, (English) and (PortugueseBR), where she writes about IT careers, Ext JS, Sencha Touch, PhoneGap, Spring Framework, and general development notes, as well as publishing screencasts. If you want to keep in touch, you can find Loiane on Facebook ( ) and Twitter

).

Loiane's profi le is already available on the Packt Publishing website, .

Acknowledgments I would like to thank my parents for giving me education, guidance, and advice all these years and helping me to become a better human being and professional. A very special thanks to my husband for being patient and ive and giving me encouragement. I also would like to thank the readers of this book and the other books I have written, for their and . Your is very valuable to me to improve as an author and as a professional. Thank you very much!

Mastering Ext JS Second Edition 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 another one? Is there any other way I can implement the same feature? This is normal. This book was written thinking about these developers. So this is what this book is about: how do we put everything together and create really nice applications with Ext JS? We are going to create a complete application, from the mockup of the screens all the way to putting it into production. We are going to create the application structure, a splash screen, a screen, a multilingual capability, an activity monitor, a dynamic menu that depends on permission, and modules to manage database information (simple and complex information). And then, we will learn how to build the application for production, how to customize the theme, and how to debug it. We will use real-world examples and see how we can implement them using Ext JS components. And throughout the book, we've also included a lot of tips and best practices to help you boost your Ext JS knowledge and take you to the next level.

What This Book Covers Chapter 1, Sencha Ext JS Overview, introduces Sencha Ext JS and its capabilities. This chapter provides references that you can read before diving into the other chapters of this book. This is done taking into consideration the possibility that this is your first with the framework. Chapter 2, Getting Started, introduces the application that is implemented throughout the book, its features, and 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 Sencha Cmd and how to create a splash screen. Chapter 3, The Page, explains how to create a page with Ext JS and how to handle it on the server side and also shows some extra capabilities, such as adding the Caps Lock warning message and submitting the page when pressing the Enter key. Chapter 4, The and Multilingual Capabilities, covers how to create the capability and also the client-side activity monitor timeout, which means if the does not use the mouse or press any key on the keyboard, the system ends the session automatically and logs out. This chapter also provides an example of multilingual capability and shows how to create a component so that the can use it to change the system's language and locale settings.

Chapter 5, Advanced Dynamic Menu, is about how to create a dynamic menu that depends on permission. The options of the menu are rendered depending on whether the has permission or not; if not, the option will not be displayed. Chapter 6, Management, explains how to create a screen to list all the s that already have access to the system. Chapter 7, Static Data Management, covers how to implement a module where the is able to edit information as though they were editing information directly from a MySQL table. This chapter also explores capabilities such as live search, filter, and inline editing (using the Cell Editing and Row Editing plugins). Also, we start exploring realworld issues when we develop big applications with Ext JS, such as the reuse of components throughout the application. Chapter 8, Content Management, further explores the complexity of managing information from a table of the database and all its relationships with other tables. So we cover how to manage complex information and how to handle associations within data Grids and Forms. Chapter 9, Adding Extra Capabilities, covers how to add features, such as printing and the ability to export to PDF and Excel, that are not ed 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 10, Routing, Touch , and Debugging, demonstrates how to enable routing in the project; it is also about debugging Ext JS applications, including what we need to be careful about and why it is very important to know how to debug. We also quickly talk about transforming Ext JS projects into mobile apps (responsive design and touch ), a few helpful tools that can help you in your daily work as a developer, and also a few recommendations of where to find extra and open source plugins to use in Ext JS projects. Chapter 11, Preparing for Production and Themes, covers how to customize a theme and create custom UIs. It also explores the steps required for, and the benefits of, packaging the application to production.

Sencha Ext JS Overview Nowadays, there are many flavors for frontend frameworks and libraries in the market. There are frameworks you can use if you only want to manipulate the Document Object Model (DOM), frameworks used only for styling, frameworks for -friendly components, frameworks used to design your project, and so on. Also there is Ext JS, a framework used to create Rich Internet Applications (RIA), but it has many other features than just pretty components. In this book, we are going to learn how to develop an application from the beginning to the end with Ext JS 5, also covering some pieces of the backend required to make our application work. We will learn how to use Ext JS with hands-on examples covering some components, how they work, and how to use them in each chapter. But first, you are going to learn what Ext JS is capable of if this is the first time you have come into with the framework.

Understanding Sencha Ext JS Can we use Ext JS to manipulate DOM? Can we use it if we want pretty and -friendly components (forms, grids, trees, and so on)? Can we use it if we need some nice charts? Can we use the Model View Controller (MVC) architecture to organize the application with Ext JS? What if we want to use a two-way data-binding between the Model and the View? Can we do that using Ext JS? And what if we do not like the colors of Ext JS components' look and feel? Can we easily change it too? And now a difficult one; can we make a build to obfuscate and optimize the CSS and JavaScript files of our application using Ext JS? Is Ext JS responsive? Can we use it in mobile devices? Amazingly, the answer is positive to all the preceding questions! As we can see, Ext JS is a complete frontend framework. The mastermind company behind Ext JS is Sencha Inc. (http://sencha.com).

Sencha Ext JS Overview

Sencha Ext JS also has a cousin called Sencha Touch. It also has the amazing features we just mentioned, but focuses on the mobile cross-platform world. We will talk very briefly about Ext JS and Sencha Touch in later chapters of this book.

Architecture of Ext JS applications Before we get started, let's make sure we understand a few of the core concepts. Ext JS is a frontend framework based on JavaScript and HTML5. This means Ext JS does not connect to the database directly. For storage, we can use one of the types of HTML5 storage, such as Web SQL or local storage, but these types of storage allow us to store only 5 MB of data, which is very little for a common application. Usually, we want to use MySQL, Oracle, MS Server or any other database. To be able to store information in a database, we need to use a server-side language, such as PHP, Java, C#, Ruby, Python, Node.js, and so on. Ext JS will communicate with the server-side language (or web services), and the server will connect to the database or any other storage (documents repository, for example). The following diagram exemplifies the architecture of an application developed with Ext JS: interacts with browser Components Grid Form Tree Chart Button Toolbar Window

Request/Response

Data Model Proxy Schema Session Store

Layouts Fit Border Card Accordion Hbox/Vbox Center Absolute

Events

HTTP/S JSON/ XML

Architecture MVC MVVM Hybrid

Asynchronous Request

PHP/Java/ASP.NET/Python/Ruby (frameworks) Web Container (Tomcat, IIS, WebSphere, Apache)

Database (MySQL/Oracle/MS Server/Firebird/others) document repository and other services

[8]

Themes CSS3 Sass Com

Sencha Ext JS

callback

Chapter 1

Ext JS overview We have already mentioned some Ext JS capabilities. Let's take a brief look at each one of them. But first, if you want to take a look at the official Sencha Ext JS webpage, visit http://www.sencha.com/products/extjs/.

Basic tutorial Before diving into this book, it is recommended that you read the contents of the following links. They contain the basic information that any developer needs to learn before starting with Ext JS: •

Basic tutorial and Ext JS overview: http://www.sencha.com/products/ extjs/up-and-running

•

Ext JS guides: http://docs.sencha.com/extjs/5.0/

•

Ext JS documents: http://docs.sencha.com/extjs/5.0/apidocs/

•

Ext JS examples: http://dev.sencha.com/ext/5.0.1/examples/index. html

•

Forum (become part of the community): http://www.sencha.com/forum/

Class system Ext JS uses an object-oriented (OO) approach. We declare classes with attributes known in Ext JS as configurations and methods (functions in JavaScript). Ext JS also follows a naming convention. If you are familiar with OO programming, you are probably familiar with the naming conventions of Ext JS as well. For example, class names are alphanumeric, starting with an uppercase character, and and then the rest of the letters are in CamelCase. For example, if we want to create a class to represent the client details, we could name it ClientDetails. Method and attribute names start with a lowercase character and then the rest of the letters are in CamelCase. For example, retrieveClientDetails() is a good name for a method and clientName is a good name for an attribute. Ext JS is organized in packages as well. Packages are a way of organizing the code that has the same purpose. For example, in Ext JS, there is a package called data that handles everything related to data in the framework. There is a packaged named grid that contains all the code related to Grids.

[9]

Sencha Ext JS Overview

For more information about the class system, please read http://docs. sencha.com/extjs/5.0/core_concepts/classes.html.

Components The main reason some people consider using Ext JS is probably because of its rich and -friendly components. Ext JS contains some of the most used components in web applications, such as forms, grids, and trees. We can also use charts that are touchfriendly (meaning they work on touchscreens as well) and the drawing package that uses all the advantages of Scalable Vector Graphics (SVG) and HTML5. You can checkout the official Sencha Ext JS examples page at http://dev.sencha. com/extjs/5.0.0/examples/index.html to have an idea of what we can do with

the examples.

The component hierarchy You will notice that throughout this book, we will mention such as component, container, and widget. The following diagram exemplifies the component hierarchy in Ext JS: Component

Tool

Loask Button

Container

Toolbar

Viewport

Tab

Window Menu Table

Grid

Form

Tree

[ 10 ]

Chapter 1

The Component class is the parent class for all Ext JS widgets. Below the Component class, we have the Container class. The Container class might contain other components. For example, let's take a look at the following Grid:

The Grid class extends from the class, a very popular component in Ext JS. The class s headers, docked items (toolbars), and it contains a body space. Subclasses of the class, such as DataView, Tree, Grid, and Form, are s, but instead of the body, they have a specialized View class that is responsible for rendering the specific information. For example, the View class of a Grid is specialized in rendering the Grid Column; the View class of a Tree is specialized in rendering hierarchical information, and the View class of a Form (called BasicForm) is specialized in rendering form fields.

Grid The grid component is one of the most used components in web applications. It is used to display tabular data. To create a grid, the developer needs to declare at least two configurations: columns and Store. The Store class organizes a collection of data in Ext JS, and it is responsible for feeding the grid with the information to be displayed. We will explore it when we discuss the data package. [ 11 ]

Sencha Ext JS Overview

The grid component can be used as a plain and simple data grid, with only the information records being displayed. Or, if we have a large amount of data, we can use its paging capabilities, or we can also use a Big Data Grid if we really have a large amount of data. There are also other features such as grouped header grid (also known as Pivot Grid); we can also have a grid with locked columns or even with widgets, such as chats, as demonstrated by the previous screenshot. Among other features, we can also sort and filter the information inside the grid and use some of its plugins to accomplish tasks such as expanding the rows to display more information without popups, using checkboxes to select rows and automatic numbered rows as well. And there is more: the grid component also s editing by opening a small pop-up row so that you can edit the information directly in the grid. The grid also s cell editing, which is similar to what we can do in MS Excel—edit the information by double-clicking on a cell. For more information, please take a look at http://docs.sencha. com/extjs/5.0/apidocs/#!/api/Ext.grid. and http:// docs.sencha.com/extjs/5.0/components/grids/grids.html.

Tree Trees display hierarchical data, such as a file directory. A tree's data comes from a TreeStore or is predefined in the root configuration. The tree also s sorting and filtering, select a row using checkboxes, and we can also mix a tree with a grid and use the TreeGrid component. It also s plugins such as drag and drop between trees. For more information, please take a look at http://docs.sencha. com/extjs/5.0/apidocs/#!/api/Ext.tree. and http:// docs.sencha.com/extjs/5.0/components/trees.html.

Forms Next, we have the form component. We can implement powerful forms using text, area, and number fields. We can also use the date/month picker, checkboxes, radio buttons, comboboxes, and even file . All fields have the basic native validation (with error messages to the ), such as mandatory fields and minimum and maximum value or length, but we can easily customize and create custom validation (IP address for example). [ 12 ]

Chapter 1

For more information, please take a look at http://docs.sencha. com/extjs/5.0/apidocs/#!/api/Ext.form. and http:// docs.sencha.com/extjs/5.0/components/forms.html.

Other components We also have the charts. We can build column, bar, line, area, scatter, pie, radial, gauge, and even financial charts. We can have basic, stacked, multi-axis, and 3D charts as well. The charts are also fed by a Store. And of course, there are basic components that will help our application look even better, such as menus, tabs, s, windows, alerts, toolbars, and so on. The components have Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) and also right-to-left languages. Seems nice, right? We will cover most of the components and its capabilities throughout the examples of this book.

Layouts Ext JS s different possibilities. It also has a great layout manager (only when we create an Ext JS application using its base component, the Viewport. For components that are used in a standalone form (rendered in a