Thursday, January 19, 2012

Ext.define versus Ext.create

Ext.define is used to define (or, specify) a class. You may use Ext.define to define a root class or a derived class. When you are defining a derived class, it is possible to override parent class's instance method as well as static method! (see http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Class-cfg-override)

Ext.create is used to instantiate a class.

Ext.create takes the name of the class you've Ext.defined elsewhere, or an anonymous class.

Examples:

1. Ext.create taking an anonymous class as argument:


Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    width: 200,
    html: '<p>World!</p>',
    renderTo: Ext.getBody()
});


2. Ext.create taking the name of a class that has been Ext.defined separately.

Ext.define('My.panel.Panel', {
    title: 'Hello',
    width: 200,
    html: '<p>World!</p>'
});

Ext.create('My.panel.Panel', {
    renderTo: Ext.getBody()
});