Book Image

Learning Ext JS_Fourth Edition

Book Image

Learning Ext JS_Fourth Edition

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Learning Ext JS_Fourth Edition
Jul, 2015 | 452 pages
No titles found
Table of Contents (22 chapters)
Learning Ext JS Fourth Edition
Learning Ext JS Fourth Edition
Credits
Credits
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
An Introduction to Ext JS 5
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
The Core Concepts
The class system
Loading classes on demand
Working with the DOM
Summary
3
Components and Layouts
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
It's All about the Data
Ajax
Models
Working with the store
Retrieving remote data
Sending data
Summary
5
Buttons and Toolbars
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
Doing It with Forms
The form component
The available fields
The field container
Triggers
Submitting the data
Summary
7
Give Me the Grid
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
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
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
Architecture
The MVC and MVVM patterns
Creating our first application
Creating a module
Router – implementing and using
Summary
11
The Look and Feel
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
Responsive Configurations and Tablet Support
Overview
Implementing responsiveness to the application
Summary
13
From Drawing to Charting
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
Finishing the Application
Preparing for deployment
The Sencha command
Testing the application
Summary
15
What's Next?
What's Next?
Forums
Resources
Third-party plugins (commercial)
Third-party plugins (free)
The future
Final thoughts
Summary
Index
Index

Working with the DOM

Ext JS provides an easy way to deal with the DOM. We can create nodes, change styles, add listeners, and create beautiful animations, among other things without worrying about the browser's implementations. Ext JS provides us with a cross-browser compatibility API that will make our lives easier.

The responsible class for dealing with the DOM nodes is the Ext.Element class. This class is a wrapper for the native nodes and provides us with many methods and utilities to manipulate the nodes.

Note

Manipulating DOM directly is considered bad practice and none of the DOM markup should be placed in the index file. This example exists only for illustrative purposes.

Getting elements

The Ext.get method let us retrieve a DOM element encapsulated in the Ext.dom.Element class, retrieving this element by its ID. This will let us modify and manipulate the DOM element. Here is a basic example:

<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content...
Previous Section
End of Section 4
Next Section