Extjs4 MVC, Ext.define() and Ext.create()

Question

Firstly, My question is I want to know how different between Ext.Define() and Ext.Create(), and I want to know how to use them in right way.

I reviewed my codes and many Extjs4 MVC tutorials,

and I found many many Ext.define() methods in Extjs4 MVC project.

I understand Ext.define() method create an object (CLASS).

And if I need a panel just for instance, I will not make any inheritance of the panel, also I will not reuse the panel after initialized.

Then, I think I need to use Ext.create() instead of Ext.define().

So, I try to change my code @.@;

In view, it was

Ext.Define("App.view.MyGrid",{
    extend : 'Ext.grid.panel',
    alias : 'widget.MyGrid',
    initComponent : function(){
        this.columns : [{ header: 'column' }];
        this.store : Ext.create('Ext.data.ArrayStore', {})
    }
});

and I change to,

var myGrid = Ext.create('Ext.grid.Panel', {
    layout: 'fit',
    border: false,
    columns: [{ header: 'column' }],
    store: Ext.create('Ext.data.ArrayStore', {})
});

After change the code, I got a problem that I can not retrieve(grep) the panel in Controller,

before I did this way before,

refs: [
        {
            ref: 'myGrid',
            selector: '',
            xtype: 'MyGrid', //view - alias
            autoCreate: true
        }
]

this.getMyGrid();

but after change, I don't know how to retrieve that panel in controller.

and while searching web to find out how to grep it, I just wonder 'Is it right how I understand about Ext.define() and Ext.create()? and why many people are using Ext.define() method even they not use again and not for inheritance?'

please advice me to understand fundamentals of Extjs.

Thanks!

Answer 1

My 2c: I always define stuff, and then just create it ( Unless its a 2 liner component ). This means that I can always reuse a component elsewhere, without even having to think about whether I would want to.

Ext.define also creates an error at page load, instead of component init/construct (depending on how code is written ), which, for me at least, makes debugging easier.

Also, it seems Ext.define is actually faster, which is kind of a big deal. http://jsperf.com/extjs-create-vs-define-create

Ext.define also tends to simplify the architecture ( in that it forces you to think about what a component is going to be called, and that lends itself to a file name, for the autoloader ( which incidentally is ANOTHER reason to use Ext.define http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Loader)

Ext.define, with the requires keyword, also lets you play with creating custom builds of the sencha package through the sdk ( http://www.sencha.com/products/sdk-tools/ ) - I am somewhat unsure whether this is used in ExtJS 4 though, or only in touch.

Having sung its virtues, it is definitely trade-off between amount of files though, which is a complexity of its own.