Blog

Introduction

Teacher’s presentation, course objectives, scope and requirements to take the course.
• Introduction

Installation

Basic concepts and knowledge to start working in your own way; this will help us prevent future problems.
• Where can I get ExtJS? Do I have to pay? Is it free?
• Basic installation of the framework
• Themes installation and “Look and Feel” configuration
• What are the adapters? What are the benefits of using them?
• Image spacer’s definition and its importance
• Quizz: First Chapter of the Ext JS course

Localization

With ExtJS it is possible to internationalize the widgets into different languages. English is the language by default, but it is possible to make translations to other languages or even find widgets already translated.
• Language installation
• Different languages in one place

ExtJS: Object oriented

We will define terms and concepts to program object-oriented in JavaScript using some of the tools that ExtJS proportionate to have an easy implementation.
• JavaScript References
• What is the scope of a variable?
• What are the Closures?
• The context and the variable “this”
• Creating objects and public methods
• Private methods and privileged methods
• Packages and namespace
• Inheritance in JavaScript
• Quizz: Basic concepts of JavaScript (Part I)
• Quizz: Object-Oriented JavaScript (Part II)

Working with the DOM

Quick look at the Ext tools to manipulate the DOM, working with special effects and animations, search the DOM and apply events.
• Getting to know the object Element
• The class DomHelper
• Searching elements with selectors
• Apply effects to the Elements
• Quizz: Working with the DOM

Messages and Events

Explanation of how display different messages to the user and how to create events on DOM elements.
• Alerts and messages shown to the user
• Handling events on DOM elements and components
• Quizz: Messages and Events

Ajax and the object Store

Explanation on how to create Ajax requests to the server, definition of the concept Store and its importance on the information exchange.
• Ajax object, GET and POST requests
• What is a Store? How does it work?
• Reading information in XML
• Reading information in JSON format
• Quizz: Ajax and the object Store

Panels, Windows and Tabs

The panels are one of the most commonly used components of the framework, that’s why it is important to understand its functionality. Like panels, windows are very useful to store other components.
• What is a panel? What’s the functionality? How do you create one?
• Floating window
• Toolbar in panels and windows
• Status bar in panels and windows
• The tabs

The Forms

Explanation on how to create a form, validations, different controls to retrieve information and interact with the server in order to request and save information.
• ExtJS basic forms and fields
• Combo box loaded dynamically and remotely
• Linked ComboBoxes with ExtJS
• A calendar to capture dates
• Text areas and HTML editors
• Loading forms remotely
• Saving information in the server
• Simple validations in the forms
• Custom validations

Charts

• Charts with ExtJS
• Charts Series

Grids

This component is very useful to display information; it allows performing different tasks in an easy and fast way.
• Binding information from an array to a grid
• Show information from an XML file
• Show information from JSON format
• Remote grid pagination
• Formatting the information and adding HTML to the cells
• Using dates and time in a grid
• Common events on the grid

Editor Grid

Sometimes is very useful to be able to edit information directly on a grid, in this way we avoid opening a new form with the information of each field.
• Edit the cells of a Grid
• Edit the cells of a Grid using a ComboBox
• Modify a date using a calendar
• Saving the changes made in the Editable Grid with Ajax
• Creating a CRUD with REST

Tree with ExtJS

The trees are very useful to show in a visual way an organization hierarchy, for example a document directory, a family or group of people, etc. ExtJS provides the perfect component to do this task
• The component Tree Panel
• Trees generated with Ajax
• Change the icons of the nodes
• Display the file system of the server
• Modify the selected nodes
• Drag and Drop
• Edit the text of a node
• Sort nodes

Building Layouts

The layouts are used to design a site; ExtJS provides different ways to do it. In this chapter we will see some examples.
• Viewport and its regions
• Accordion
• Layout combination

Drag and Drop

In some situations is very usable to drag and drop an item in some components. In this chapter we’ll see how to it in an easy way.
• A basic drag & drop
• Multiple elements
• Sort lists

Other components

Quick view of the most outstanding components of the framework.

ExtJS with Adobe AIR

Ext has libraries that are useful to develop applications with Adobe Air; in this way we can create applications that run from the desktop.

Plug-ins and Extensions

The Ext community is very active, proof of this is the amount of plug-ins that have been developed and are offered free. In this chapter we will see some of them and how to integrate them with your project.

Developing extensions

You can’t find the extension you need? Don’t worry! You can do it yourself! We will see what you need to do to create your own extension.

Evaluation

Evaluation of the most important topics of the course. It is recommended so you can to evaluate yourself.