ExtJS Framework
Feb 06, 2009 | Carousel | By Crysfel | 19 Comments | Leer en EspañolIt is possible to create friendly interfaces to the user with few lines of code. ExtJS is the most advance library to develop applications faster, with a great look and feel, and with a more flexible architecture. This course is available for both, beginners and advanced users.
Author: Crysfel
I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter
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
This is one of the components of ExtJS 3.0 that let us create different kind of charts, in this chapter we will see some of them
• 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.
Commercial ExtJs and Sencha Touch Themes
Looks like something worth getting into after jQuery. I love anything with a beautiful interface.