How to use Ext.define in ExtJS 4?

I'm new to ExtJS 4 and need some help understanding how the Ext.define works, please.

In fact what I want to do is something similar to the portlets in the portal example, in my application I will need so many objects to add in my different tabs, so in order to organize my code and not have just one very big script,开发者_Go百科 I want to define each component I need in a separate file and then call it in the main script when I need it (I will mainly use the examples so this is why I want to know how Ext.define works so I can adapt those examples and make them work the way I want).

I hope I was clear.

And thank you in advance for your help.

Ext.define ( String className, Object data, Function createdFn ) : Ext.Base

Ext.define is used to define a class. Example:

// creates My.computer.NoteBook Class
Ext.define('My.computer.NoteBook', {

     extend:'Ext.panel.Panel',

     config: {

          hardware:'Dell',
          os:'Linux',
          price:500
     },

     constructor:function(config) {

          this.initConfig(config);

          return this;
     }
});


// creates instance of My.computer.NoteBook Class
var myComputer = Ext.create('My.computer.NoteBook', {

     hardware:'MacBook Pro',
     os:'Mac OS X',
     price:1800
});

so, with Ext.define you make a mold, witch you can use later in many cases. You can define width, height, id, css, so later you just call that mold/class. In your case you can define a class for every tab, and then when you make a function to open/create that tab you can say:

if(existingTab){

    mainPanel.setActiveTab(existingTab);

}else{

    mainPanel.add(Ext.create('My.computer.NoteBook', {id:tabId})).show();   
}
...

You can put every Class in your separate .js file, later, on production you will make a class.js with all classes in one minified .js file!

You can define a class and then say:

items: Ext.create("My.computer.NoteBook",{
        ...
})

Ext JS 4 has a new way to extend... it's call Ext.define and it incorporates Ext.extend, Ext.reg and Ext.ns that we had to do in Ext JS 3 and before into one method call...

Ext.define('com.sencha.MyPanel', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.mypanel',
    ...
    ...
});

Ext.define takes two params, first is the full class name (will act as Ext.ns to create the path and will create the Object) and the config. In the config you specify what class you are extending using the extend config. You set up an XType using the alias config. The alias config is a little different as it has two parts... first part is the type (widget in this case) and then the XType (mypanel).