class vs xtype ??

**german.larrosa** · 10 Apr 2012 12:08 PM

Hi,

I know that you can use the properties xclass or xtype in order to instantiate a class in Sencha 2.x but actually I wanna know the differences between them, or even better, which is the best way (performance) to instantiate a class in Sencha 2x ?

Thanks in advance,

Germán.

**mitchellsimoens** · 10 Apr 2012 12:45 PM

Code:

{
    xtype : 'something'
}

Code:

{
    xclass : 'MyApp.util.Foo'
}

There is technically no difference between them. xclass can be used for things that aren't components.

**milton9480** · 11 Apr 2012 4:35 AM

Originally Posted by mitchellsimoens

Code:

{
    xtype : 'something'
}

Code:

{
    xclass : 'MyApp.util.Foo'
}

There is technically no difference between them. xclass can be used for things that aren't components.

Mitchell, what about alias definition ? There is a way that I've found in Sencha pages that uses alias: 'widget.cmpname'. What's the difference with others ?

**mitchellsimoens** · 11 Apr 2012 4:59 AM

alias just defines an xtype for components. It's the type of alias and the name <type>.<name>

So 'widget.cmpname' is saying that the type of alias is a widget and the name is cmpname. For the widget, the name is also the xtype.

**milton9480** · 11 Apr 2012 5:39 AM

Tanks Mitchell for your time and quick responses!!!

Ok, I'm not clear now about the difference between use widgets or just xtypes.
When I define a component, I can use

Code:

alias: 'widget.mypanel'

or just

Code:

xtype: 'mypanel'

.
Then I can use:

Code:

{xtype: 'mypanel'}

in both cases. Correct?
Then, I've seen a code sample at API where it says that widgets allows to use the following:

Code:

Ext.define('MyApp.CoolPanel',{
    extend:'Ext.panel.Panel',
   alias:['widget.coolpanel'],
    title:'Yeah!'});

// Using Ext.create
Ext.widget('widget.coolpanel');
// Using the shorthand for widgets and in xtypes
Ext.widget('panel',{
    items:[
     {xtype:'coolpanel', html:'Foo'},
     {xtype:'coolpanel', html:'Bar'}
   ] 
});

So, what's the real difference between those options, and when it should be used? Is there any difference in performance? Can I just use xtype always to define my custom components, rather to use alias and widgets? Which is the advantage of alias and widgets?

Thanks again for your help!

Originally Posted by mitchellsimoens

alias just defines an xtype for components. It's the type of alias and the name <type>.<name>

So 'widget.cmpname' is saying that the type of alias is a widget and the name is cmpname. For the widget, the name is also the xtype.

**mitchellsimoens** · 11 Apr 2012 5:59 AM

You alias vs xtype will result the same thing.

If you use

Code:

{ xtype : 'mypanel' }

That component will only be created when needed (lazy instantiation).

If you use

Code:

Ext.widget('mypanel');

That component will be created right away (direct instantiation).

The benefit of lazy instantiation is you have a small object in memory until it's needed then it will be created into a full blown component. Down side is you don't have access to methods and such on that until it's created into a component, this is very rarely come upon.

**luiscortes** · 11 Apr 2012 12:05 PM

I guess what might help me:

Is some informational/overview page which lets me know what are components, and any other high level definitions I should know.

When and why I should use:
xclass, xtype, alias, id, etc.

How should I access these objects ? Ext.getCmp ? I think I have experimented with these, and it is mind boggling to me right now when to use one verses another.

Is there a webpage with all these answers. I guess it isn't clear to me which is which. It would be nice to get the 50000 ft. view of all these concepts.

thanks for your help.

**mitchellsimoens** · 11 Apr 2012 12:14 PM

I would never use id, it will get you into trouble fast without you knowing it's coming (collisions). ComponentQuery is a much more robust and flexible solution to resolve components and it uses xtype and properties to resolve it:

example:

Code:

panel list[foo=bar]

That would get a list that has a property foo that is set to 'bar' and is a child of a panel.

**sergiob** · 17 Apr 2012 6:05 AM

Mitchell, if some component has xtype:'something1' and class:'something2' which property has priority (assuming that the class and the alias point to different classes)?

Originally Posted by mitchellsimoens

Code:

{
    xtype : 'something'
}

Code:

{
    xclass : 'MyApp.util.Foo'
}

There is technically no difference between them. xclass can be used for things that aren't components.

**mitchellsimoens** · 17 Apr 2012 6:20 AM

Originally Posted by sergiob

Mitchell, if some component has xtype:'something1' and class:'something2' which property has priority (assuming that the class and the alias point to different classes)?

xclass will take priority over xtype:

Code:

var container = new Ext.Container({
    fullscreen : true,
    items      : {
        xtype   : 'panel',
        xclass  : 'Ext.Container'
    }
});

console.log(container.down('panel')); //null, means this is Ext.Container

class vs xtype ??

Thread Tools

Search Thread

Display

class vs xtype ??

class vs xtype ??

Great question! And what about alias.

Great question! And what about alias.

Great question, I was struggling too

Great question, I was struggling too