13. From Drawing to Charting | Learning Ext JS_Fourth Edition

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Learning Ext JS_Fourth Edition

By : Carlos A Mendez Segura, Villa, Gonzalez

4.3 (4)

Learning Ext JS_Fourth Edition

4.3 (4)

By: Carlos A Mendez Segura, Villa, Gonzalez

Overview of this book

If you are a JavaScript developer who now wants to use the Ext JS framework, this is the book for you. This guide is useful to you whether you're new to Ext JS 5 or are a seasoned expert. Experience in HTML, CSS, and JavaScript is required in order to understand and get the most out of this book.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. An Introduction to Ext JS 5

1. An Introduction to Ext JS 5

Considering Ext JS for your next project

Getting started with Ext JS

Our first program

Tools and editors

What's new in Ext JS 5?

Summary

2. The Core Concepts

2. The Core Concepts

The class system

Loading classes on demand

Working with the DOM

Summary

3. Components and Layouts

3. Components and Layouts

The component life cycle

About containers

The layout system

More layouts

Comments about using layouts

Summary

4. It's All about the Data

4. It's All about the Data

Ajax

Models

Working with the store

Retrieving remote data

Sending data

Summary

5. Buttons and Toolbars

5. Buttons and Toolbars

Event-driven development

Creating a simple button

Segmented buttons

Adding menus

Toolbars

The breadcrumb bar

The main menu for our application

Summary

6. Doing It with Forms

6. Doing It with Forms

The form component

The available fields

The field container

Triggers

Submitting the data

Summary

7. Give Me the Grid

7. Give Me the Grid

The data connection (models and stores)

A basic grid

Columns

Column renderers

The Widget column

Selection models

Grid listeners

Features

Plugins

Grid paging

Infinite scrolling

Summary

8. DataViews and Templates

8. DataViews and Templates

The data connection (model and store)

A basic DataView

Handling events in DataView

Templates

A more complex DataView component

Summary

9. The Tree Panel

9. The Tree Panel

A basic tree panel

The TreeStore

Tree nodes

Adding and removing nodes

The check tree

The tree grid panel

Summary

10. Architecture

10. Architecture

The MVC and MVVM patterns

Creating our first application

Creating a module

Router – implementing and using

Summary

11. The Look and Feel

11. The Look and Feel

Setting up our environment

The packages folder

Variables

Advanced theming

Different styles for the same component

Supporting legacy browsers

Summary

12. Responsive Configurations and Tablet Support

12. Responsive Configurations and Tablet Support

Overview

Implementing responsiveness to the application

Summary

13. From Drawing to Charting

13. From Drawing to Charting

Basic drawing

Adding interaction

Charts

Series examples

More charts

Introducing chart themes

Enhancing our application with charts

Summary

14. Finishing the Application

14. Finishing the Application

Preparing for deployment

The Sencha command

Testing the application

Summary

15. What's Next?

15. What's Next?

Forums

Resources

Third-party plugins (commercial)

Third-party plugins (free)

The future

Final thoughts

Summary

Index

Index

Enhancing our application with charts

The examples covered so far were in traditional code (basic examples using the Ext JS framework directly), but what happens when we want to embed the charts in an MVC or MVVM app? Well! First of all, we need to add a reference to the proper code package that we want to use:

So, let's begin by opening the app.json file (the application code used in chapters 10, 11, and 12) and locating this code:
```
"requires": [
 ],
```
For use in Ext JS charting, let's change it to this:
```
"requires": [
"sencha-charts"
 ],
```
Or for legacy charts (Ext JS 4), change to:
```
"requires": [
"ext-charts"
 ],
```
After this change, save the file. Now, let's use the Sencha CMD tool. Open the CMD tool and type this:
```
sencha app build
```
By using this command, we ensure that our code as well as Ext JS and the Chart package are included in our application. So, after the build ends, let's monitor the changes in our application using this line:
```
sencha app watch
```
This procedure will make sure that the desired package...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning Ext JS_Fourth Edition

Search

Your notes and bookmarks