Tutorial ExtJs 4: Declare a new Class

Create a new class 'My.cool.Window; which extends the class 'Ext.window', have a property 'name' and add a function named 'doit'.

Old way:

    
// 'Ext.ns' is a shortcut for 'Ext.namespace'
// you need to declare 'cool' before using it in the next line
Ext.ns('My.cool'); 
// Extend the class Ext.Window; it needs to exist/loaded before
My.cool.Window = Ext.extend(Ext.Window, { 
 name: "myCoolWindow",
 doit: function(){
  alert("Do it!");
 }
});

New way:

    
Ext.define("My.cool.Window",{
 name: "myCoolWindow",
 extend: "Ext.window.Window",
 doit: function(){
  alert("Do it!");
 }
}, function(){
 console.log("My.cool.Window is created and all dependencies are ready!");
});

Advantage of the new way:

• you don't have to create a namespace for 'My.sample', it's automatic.
• dynamic loading for 'Ext.window.Window'

The 'Ext.define' signature is the following:

Ext.define(className, members, onClassCreated);

• className: The class name
• members: is an object represents a collection of class members in key-value pairs
• onClassCreated: is an optional function callback to be invoked when all dependencies of this class are ready, and the class itself is fully created. Due to the new asynchronous nature of class creation, this callback can be useful in many situations.

source: http://docs.sencha.com/ext-js/4-0/#!/guide/class_system