Creative portal «Terra Ad Caelum»
Book Reader
Books overview

 

Contents

226
Ext JS 6 By Example

Author(s): Anand Dayalan

 

Cover

 
1

Copyright

 
3

Credits

 
4

About the Author

 
5

About the Reviewers

 
6

www.PacktPub.com

 
8

Table of Contents

 
10

Preface

 
16

Chapter 1: Getting Started with Ext JS

 
22
    

Why Ext JS?

 
22
        

Cross-browser support

 
23
        

Rich UI components

 
23
        

Two-way binding

 
23
        

Architectural pattern for JavaScript

 
23
        

Simplifying a complicated operation

 
23
        

Easy DOM access

 
24
        

Client-side routing

 
24
        

Support for accessibility

 
24
    

An introduction to Ext JS

 
24
        

The universal application

 
26
    

Setting up Ext JS

 
27
        

Sencha Cmd

 
27
            
Java Runtime Environment (JRE)
 
27
            
Ruby
 
27
            
Installing Sencha Cmd
 
28
    

Generating the Ext JS application using Sencha Cmd

 
29
    

The application architecture

 
33
        

Model

 
34
        

View

 
34
        

Controller

 
34
        

View model

 
34
            
View model – MainModel.js
 
35
            
Controller – MainController.js
 
36
            
View – main.js
 
36
    

Exploring Sencha Cmd commands

 
41
        

The Sencha command format

 
41
        

Help

 
41
        

Upgrading Sencha Cmd

 
42
        

Generating an application

 
42
        

Building the application

 
43
        

Launching the application

 
43
        

The code generation

 
43
        

Upgrading your application

 
44
    

Debugging an Ext JS application

 
44
    

Illumination

 
44
        

The features of Illumination

 
44
            
Object naming
 
44
            
Element highlighting
 
44
    

App Inspector

 
46
        

Sencha Fiddle

 
47
    

Tha development IDE

 
47
    

Summary

 
48

Chapter 2: Core Concepts

 
50
    

The class system

 
50
        

Ext

 
51
            
application
 
51
            
define
 
51
            
create
 
52
            
onReady
 
53
            
widget
 
53
            
getClass
 
55
            
getClassName
 
55
            
Ext.Base
 
55
            
Ext.Class
 
55
            
Ext.ClassManager
 
55
            
Ext.Loader
 
56
    

Events

 
56
        

Adding listeners

 
56
        

Removing listeners

 
57
        

The DOM node event handling

 
58
    

Accessing DOM

 
58
        

Ext.get

 
58
        

Ext.query

 
58
        

Ext.select

 
59
            
Multiple selections
 
59
            
Selection root
 
59
            
Selection chaining
 
59
        

Ext.ComponentQuery

 
59
    

Components, containers, and layouts

 
61
        

Components

 
61
        

Containers

 
62
        

Layout

 
63
            
updateLayout
 
65
            
suspendLayout
 
65
            
The absolute layout
 
66
            
The accordion layout
 
67
            
The anchor layout
 
68
            
The border layout
 
70
            
The card layout
 
71
            
The center layout
 
72
            
The column layout
 
72
            
The fit Layout
 
72
            
The hbox layout
 
73
            
The table layout
 
74
            
The VBox layout
 
76
    

Summary

 
77

Chapter 3: Basic Components

 
78
    

Getting familiar with basic components

 
80
        

Ext.Button

 
80
        

Ext.MessageBox

 
83
    

Forms and form fields

 
84
        

Ext.form.Panel

 
84
    

Fields

 
85
        

Ext.form.field.Text

 
85
        

Ext.form.field.Number

 
85
        

Ext.form.field.ComboBox

 
86
        

Ext.form.field.HtmlEditor

 
87
    

The form field validation

 
88
        

Events

 
88
        

Form field containers

 
88
        

Ext.form.CheckboxGroup

 
88
        

Ext.form.FieldContainer

 
89
        

Ext.form.RadioGroup

 
90
        

Submitting a form

 
90
        

Menus and toolbar

 
91
    

The customer feedback form design

 
92
    

Calculator — a sample project

 
96
        

The folder structure

 
97
            
App — app.js
 
97
        

MVC and MVVM — Revisit

 
98
            
Model
 
98
            
View
 
98
            
Controller
 
98
            
ViewController and Controller
 
98
            
View model
 
99
        

View — Main.js

 
99
        

Controller — MainController.js

 
101
        

ViewModel — MainViewModel.js

 
104
    

Summary

 
104

Chapter 4: Data Packages

 
106
    

Model

 
106
        

Field

 
106
            
The data conversion
 
107
            
Validators
 
107
            
Relationships
 
108
            
Custom field types
 
110
    

Store

 
110
        

The inline data store

 
112
        

Filtering and sorting

 
112
        

Accessing the store

 
113
            
Accessing the store using StoreManager
 
113
            
Accessing the store using Ext.app.ViewModel
 
114
        

Store events

 
114
        

The store in ViewModel

 
115
    

Proxies

 
116
        

The client-side proxy

 
116
            
The memory proxy
 
116
            
The LocalStorage proxy
 
117
            
The SessionStorage proxy
 
117
        

The server-side proxy

 
118
    

To do — a RESTful sample project

 
118
    

Summary

 
128

Chapter 5: Working with Grids

 
130
    

The basic grid

 
131
    

Sorting

 
134
        

Renderer

 
134
        

Filtering

 
135
        

Pagination

 
137
    

Cell editing

 
138
    

Row editing

 
141
    

Grouping

 
142
    

The pivot grid

 
145
    

The company directory – a sample project

 
150
    

Summary

 
157

Chapter 6: Advanced Components

 
158
    

The tree panel

 
159
        

The basic tree

 
160
    

The tree grid

 
163
    

Data views

 
166
    

The picture explorer — a sample project

 
169
    

Drag and drop

 
174
        

Configure the items as draggable

 
174
        

Create the drop target

 
175
        

Complete the drop target

 
175
    

Summary

 
176

Chapter 7: Working with Charts

 
178
    

Charts

 
178
        

Chart types

 
178
            
The cartesian chart
 
178
            
The polar chart
 
179
            
The spacefilling chart
 
179
    

Bar and column charts

 
179
        

The basic column chart

 
179
        

The bar chart

 
182
        

The stacked chart

 
183
        

The 3D bar chart

 
189
        

Area and line charts

 
189
            
The area chart
 
189
            
The line chart
 
191
        

The pie chart

 
192
            
The basic pie chart
 
192
        

The donut chart

 
194
        

The 3D pie chart

 
194
    

The expense analyzer – a sample project

 
196
    

Summary

 
203

Chapter 8: Theming and Responsive Design

 
204
    

An introduction to SASS

 
204
        

Variables

 
205
        

Mixins

 
205
        

Nesting

 
206
    

Theming

 
207
        

Creating a custom theme

 
208
        

SASS variables

 
211
        

Create a new component UI using SASS mixins

 
212
        

JS overrides

 
212
        

Images

 
213
        

Styling your application

 
213
    

Responsive design

 
215
        

responsiveConfig

 
216
    

Summary

 
217

Index

 
218