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.

Davor Zubak · Accepted Answer · 2013-05-14T13:37:24.513

24

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

edited May 14 '13 at 13:37

answered Jun 09 '11 at 09:58

Davor Zubak

4,726
13
59
94

thanks a lot, i do understand the first part, didnt really get the second one though, but i can use `var panel1 = Ext.create('Ext.app.myPanel',{title : 'panel 1',height:350});` and then call it in my tab like that `items : [panel1 ]`. i have already managed to do this and defined a panel and simple grid, **my problem is ** declarings vars and functions inside it, like in the [grid filtering example](http://dev.sencha.com/deploy/ext-4.0.1/examples/grid-filtering/grid-filter-local.html) how can i do the same in separate script with ext.define? – Armance Jun 09 '11 at 10:10
3

You define your view, all its methods and propreties in class, and then just create an instance in items:. You have to make an instance somewhere. – Davor Zubak Jun 09 '11 at 12:02
thanks,i can call it without issues but defining it is the problem.. i get errors,would u take a look at my other [post](http://stackoverflow.com/questions/6292214/uncaught-typeerror-cannot-call-method-insert-of-undefined) – Armance Jun 09 '11 at 12:04
Shouldn't your constructor call its parent? Like this: this.__proto__.superclass.constructor.call(this, cfg); – ByteWelder Feb 29 '12 at 11:47
@KenV.H., in Extjs3 , yes, it should. ;-) – Davor Zubak Feb 29 '12 at 12:30

score 14 · Answer 2 · answered Jun 23 '11 at 13:47

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

How to use Ext.define in ExtJS 4?

2 Answers2

Linked