PDA

View Full Version : Alias, xtype and widget



tonyx
7 Sep 2011, 12:00 PM
What is exactly the relationship between these three different concepts? I know that if you alias a class by widget.name you can later use it by specifying xtype: 'name'. The same class can also be initialized by Ext.widget('name'). But what about alias that do not start with 'widget'? Can they be lazily initialized? What if I want to directly specify the fully qualified class name to be lazily initialized instead of creating and using a xtype? Can that be done?

skirtle
8 Sep 2011, 4:04 AM
widget is not the only prefix option, there are many. Plugins use plugin, proxies use proxy, ... Take a look at the ExtJS source to see more.

xtype is a way to specify the component type in a config object. This is interpreted by a container to create the component. As containers can only contain components (and not plugins, proxies, etc.) it doesn't make sense to use xtypes with those other alias types.

However, the other alias types are used in other places. When you specify a proxy on a model or store it is the alias you are using in the type option. Similarly, readers, writers, plugins and grid features are often created using their alias. e.g. for a grid features you'd use the ftype.

If you take a look at the source to Ext.widget() it may give you some insight into how it works:

http://docs.sencha.com/ext-js/4-0/source/ClassManager.html#Ext-method-widget

I don't believe there is a way to use the class name instead.

mitchellsimoens
8 Sep 2011, 6:10 AM
So basically, alias is <prefix> + '.' + <xtype>

Here are some common aliases:

widget.panel
widget.window
plugin.rowediting
feature.grouping

tonyx
8 Sep 2011, 8:15 AM
That is very clear explanation. Got it thank you.

tonyx
8 Sep 2011, 8:17 AM
Is there any work around to initialize component lazily by their fully qualified class name? Sometimes I find myself adding xtype alias to classes just to be able to lazily initialize them later, and it just turns out to be two names that I have to remember for each class.

mitchellsimoens
8 Sep 2011, 8:24 AM
To create a component lazily, you have to use the XType. The only way to create a Component via the class name (Ext.panel.Panel) is with Ext.create which will create the Component right away.

skirtle
8 Sep 2011, 8:39 AM
There's a common misunderstanding about xtypes that comes from how things worked in the ExtJS 2 days. The docs are wrong too. If you do something like this it will create the child components immediately, not lazily:


Ext.create('Ext.panel.Panel', {
...
items: [{
xtype: ...
}]
});

Though xtypes can offer lazy instantiation, in 99% of cases where people believe they are getting some sort of laziness benefit they actually aren't.

Lazy rendering is a separate issue, components like tabpanel do lazily render their children unless you force them to render the children up front. Nevertheless, the child components are instantiated immediately.

tonyx
8 Sep 2011, 8:44 AM
Hm, if that's the case. how do you actually make sure that you are getting the benefit of lazy initialization from xtype then?

mitchellsimoens
8 Sep 2011, 10:01 AM
Technically it is lazy instantiation. It is being created when needed. Here is a more in depth example:


Ext.define('MyWin', {
extend : 'Ext.window.Window',

initComponent: function() {
var me = this;

Ext.apply(me, {
items : me.buildItems()
});

me.callParent(arguments);
},

buildItems: function() {
return [
{
xtype : 'container',
html : 'Not gonna be created till needed'
}
];
}
});

So having a JS Object with two key/value pairs is very small. If the class was already instantiated, it would be much more complex. It will be instantiated when MyWin needs it to be.

Now lazy rendering is a different topic. Anything that uses CardLayout is the only way to do lazy rendering currently.

skirtle
8 Sep 2011, 10:50 AM
@mitchellsimoens. Without wishing to be annoying, I'm afraid I still think your example is misleading.

Taking this example in isolation it does not demonstrate the benefits of xtypes. It is true that the method buildItems does not instantiate the components itself but they will be instantiated immediately afterwards when initComponent calls callParent(). Using Ext.create() inside buildItems would achieve exactly the same thing. No resources are saved at all.

However, your example provides a very nice demonstration of using xtypes if we consider it in the context of subclassing. Imagine we have a subclass that wants to modify the items by overriding buildItems. If we specify all of the items using xtypes it allows the subclass to modify or even discard those configs. Had we instantiated them immediately using Ext.create() we'd have wasted time creating and destroying components we didn't need.