PDA

View Full Version : 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
{
xtype : 'something'
}


{
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
{
xtype : 'something'
}


{
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
alias: 'widget.mypanel' or just
xtype: 'mypanel'.
Then I can use:
{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:


Ext.define (http://docs.sencha.com/touch/2-0/#!/api/Ext-method-define)('MyApp.CoolPanel',{
extend:'Ext.panel.Panel',
alias:['widget.coolpanel'],
title:'Yeah!'});

// Using Ext.create
(http://docs.sencha.com/touch/2-0/#!/api/Ext-method-create)Ext.widget (http://docs.sencha.com/touch/2-0/#!/api/Ext-method-widget)('widget.coolpanel');
// Using the shorthand for widgets and in xtypes
Ext.widget (http://docs.sencha.com/touch/2-0/#!/api/Ext-method-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!



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


{ xtype : 'mypanel' }

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

If you use


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:


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


{
xtype : 'something'
}


{
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
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:


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

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