How to use Ext.define in ExtJS 4?

Question

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, 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.

Answer 1

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",{         ... })