Chapter 1, An Introduction to Ext JS 5, covers an explanation of how to start by getting the framework (downloading the file) and setting up the basic requirements you need in order to begin coding. This chapter also provides an explanation of how the framework is structured, how to set up some required tools, and gives a quick peek at the product, Sencha Architect.

Chapter 2, The Core Concepts, is about the framework's class system, and tells you how to use object-oriented programming with Ext JS. Also, this chapter explains how to extend classes, how to inherit properties, and the use of the Loader system in order to define and require dependencies in a dynamic way.

Chapter 3, Components and Layouts, explains how components work, how they are created, their life cycle, and how to take advantage of all this. Here, you also learn about types of containers and the layout system, which will help you create amazing UIs with little effort.

Chapter 4, It's All about the Data, explains how the framework handles and manipulates data to display information using data-aware widgets or components.

Chapter 5, Buttons and Toolbars, shows you how to make use of component events; listen to events; (mainly) create buttons, toolbars, and menus; and set the most basic configurations for these components.

Chapter 6, Doing It with Forms, talks about the form component, the available fields that we can use in our forms, and how to collect and submit data.

Chapter 7, Give Me the Grid, covers the basics of the most popular component, the Grid panel, in the framework, how to implement it, its column model, and custom data renderers for displaying data. We also see how to listen to events in the Grid panel and look at some plugins and features (specific capabilities) that can be implemented in the grid.

Chapter 8, DataViews and Templates, explains how to make use of DataViews and templates to create data-aware views, implement a nice organization of our data, and set styles and custom logic for the representation of data.

Chapter 9, The Tree Panel, covers the use of the tree panel component and its implementation. It also explains how to create stores and data for this component.

Chapter 10, Architecture, is one of the most important chapters in the book. It shows how to create an application using the MVC and MVVM patterns. This is done in order to create applications that can be scalable and easy to maintain. The MVVM pattern, which is a powerful pattern for reducing code, is introduced in version 5.

Chapter 11, The Look and Feel, demonstrates how to create new themes inside the framework and applications by giving our applications a new look and some color changes (themes). Also, you learn how to create specific component-style UIs using Compass and Sass.

Chapter 12, Responsive Configurations and Tablet Support, explains how we can use touch screen themes and how to set responsive configurations in components in order to make those components responsive-aware.

Chapter 13, From Drawing to Charting, talks about the basics of drawing and chart creation. We see how to create charts by the use of the SVG/VML engines. This chapter also explains how to add the Chart package to applications and the theme engine introduced in version 5.

Chapter 14, Finishing the Application, covers how to prepare our application for the production environment and deployment, covering the most essential parts for final production.

Chapter 15, What's Next?, shows you where to get more feedback and resources such as forums, other useful resources to get information tutorials from, and so on. This chapter also gives a sneak peek into some useful plugins (commercial and free).

The web browsers recommended for use are as follows:

These browsers come in handy because they come with debugging tools for easy development.

For a web server with PHP support, use this:

For the database, use the following:

For Sencha Cmd and the required tools, use these:

We will use Ext JS 5.1.1 in this book.

If you are new developers who are beginners in Ext JS, developers familiar with Ext JS who want to augment the skills of creating better applications, or developers who haven't yet used version 5.x and want to know more about it, this is the book for you.

Users should possess a basic knowledge of HTML/JavaScript/CSS/Sass/Compass, and an understanding of JSON, XML, and any server-side language (such as PHP, ASP, JAVA, and so on) is required.

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: "Inside the app/view folder, we remove all existing files (the initial skeleton), and proceed to create the initial view our application will have."

A block of code is set as follows:

Ext.define('myApp.model.modulesModel', {
    extend: 'Ext.data.Model',
    requires: [
        'Ext.data.field.String',
        'Ext.data.field.Boolean',
        'Ext.data.field.Integer'
    ],
    fields: [
       {type: 'string', name: 'description'},
       {type: 'boolean', name: 'allowaccess'},
       {type: 'int', name: 'level'},
       {type: 'string', name: 'moduleType', defaultValue: ''},
       {type: 'string', name: 'moduleAlias', defaultValue: ''},
       {type: 'string', name: 'options'}
    ]
});

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

Ext.define('myApp.store.modulesTreeDs', {
  extend: 'Ext.data.TreeStore',
  requires: [
    'myApp.model.modulesModel',
    'Ext.data.proxy.Ajax'
  ],
  constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
      storeId: 'mymodulesTreeDs',
      autoLoad: true,
      model: 'myApp.model.modulesModel',
      proxy: {
        type: 'ajax',
        url: 'serverside/data/menu_extended.json'
      }
    }, cfg)]);
  }

}); Any command-line input or output is written as follows:

sencha -sdk /path/to/ext generate app myApp /path/to/myApp

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: "Try to write something in the Customer ID field and you will see that it is read-only."

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.