Learning ExtJS 4

Friday, August 12, 2011 Comments (0) Programming, extjs, ria

Learning ExtJS 4 can be a daunting task at first. As one should expect from a framework as diverse and as powerful as ExtJS 4.

 

Resources

Application Architecture

ExtJS 4 is a MVC framework with strictly defined architecture.

You need to know:

  • How to structure folder/files when creating new ExtJS 4 application
  • Basics of working with Controller
  • Basics of working with data (Model/Store)
  • Basics of creating Views
  • How to deploy ExtJS 4 application

Suggested reading:

Loader

When you create your ExtJS application you create many new files with your custom classes in them.

In order to use those classes you must include those JavaScript files into your index.html, right?

Wrong... With new Ext.Loader class its enough to name your class properly, and put it in correct folder.

After that you simply instantiate class by using Ext.create (be sure not to use new keyword) and Ext will load JavaScript file its in if its not already loaded.

You need to know:

  • Where to put your files so loader can find them
  • How to name your classes so loader can recognize them

Suggested reading:

Class System

You can write classes in pure JavaScript, but as we all know thats not exactly the OOP we used to from other languages.

ExtJS 4 tries to remedy this by introducing his way of creating and instantiating classes.

You need to know:

  • How to define new class.
    NOTE: Be sure to ALWAYS defines new classes ExtJS way!
  • How to instantiate a class.
    NOTE: Be sure to ALWAYS instantiate new objects ExtJS way!

Suggested reading:

Controller

As in every MVC framework, central place where you write your business logic is a controller.

You need to know:

  • How to load views this controller manages
  • How to reference a component that can be anywhere in your application from your controller
  • How to write your custom event handlers for various events of those components in your controller
  • How to use generated getter methods to get a reference to Stores and Models

Suggested reading:

Views

View is any class derived from Ext.Component, for example Ext.button.Button, Ext.panel.Panel etc.

You need to know:

  • What components exist in ExtJS 4. And know in more details the bigger ones (grid, form, tree, ...)
  • How to load components with data from server. Some of components have "store" property which can be used to populate them with data from server (I.e. grid, dataview, tree, combobox, form)
  • How to create custom components

Suggested reading:

Data

ExtJS has incredible support for working with data. There is big "data" package with lot of classes.

Data can come from many different places... can be hard coded, come from server, local storage (HTML5), session, etc

Data can be in many different formats: JSON, XML.

You need to know:

  • How to use main data classes: Model, Store, Proxy
  • How to perform CRUD operations on the server JSON API by using those classes
  • How to integrate stores into components that use them. Like grid, tree, etc.

Suggested reading:

Theming

ExtJS 4 uses Sass & Compass in order to create its themes.

That means you will use less CSS but produce much more impressive results.

You need to know:

  • Sass & Compass
  • How to create custom theme from zero

Suggested reading: