ExtJS in Review-xtype vs. alias

Today, when I was helping a brother check the code for a custom control, I felt that he had more inconsistencies with the use of Xtype and alias and ExtJS the use of the sample code, and I was not quite clear about the best way to use the two properties. So after going home, I sort out this document. On the one hand to standardize our own code, on the other hand also shared to everyone, after all, the two properties of the detailed discussion of the information is almost no.

Xtype

First look at the definition of xtype. It is defined in the official document of ExtJS:

The provides a shorter alternative to creating objects than using a full class name. Using Xtype is the most common-define component instances, especially in a container.

That is, when defining a class, if we specify its xtype, then we can create these types through this xtype instead of the full name of the type. For example, the following layout declaration:

1 items: [2     Ext.create (' Ext.form.field.Text ', {3         fieldlabel: ' Foo '4    }),5      ... 6 ]

It is equivalent to the following layout using the Xtype declaration:

1 items: [2    {3         xtype: ' TextField ',4         Fieldlabel: ' Foo '5    },6    ... .. 7 ]

As you can see, when using xtype, we can no longer label the full name of the type, thus reducing the likelihood of errors when using them, reducing the cost of maintenance.

When defining a type, we can specify the xtype that the type has:

1 ext.define (' Myapp.pressmebutton ', {2     Extend: ' Ext.button.Button ',3      xtype: ' Pressmebutton ',4     text: ' Press Me '5 };

Alias

In the document, alias is defined as follows:

List of short aliases for class names. An alias consists of a namespace and a name concatenated by a period as <namespace>.<name>

Namespace-the namespace describes what kind of the alias is and must are all lowercase.

Name-the name of the alias which allows the lazy-instantiation via the alias. The name shouldn ' t contain any periods.

In a type definition, we can specify the alias that it uses:

1 ext.define (' Myapp.coolpanel ', {2     Extend: ' Ext.panel.Panel ',3     alias: [' Widget.coolpanel '],4     title: ' yeah! ' 5 });

The use of this type is also very simple, the alias can be marked in Xtype:

1 ext.widget (' panel ', {2    items: [3         {xtype: ' Coolpanel ', HTML: ' Foo '},4         {xtype: ' Coolpanel ', HTML: ' Bar '}5    ]6  });

Xtype vs. alias

As you can see, xtype and alias are kind of like, right? So what's the difference between them two, when to use Xtype, and when to use alias?

The above example also shows a more interesting thing, which is that the alias "Coolpanel" defined by aliases can be referenced directly through the xtype. In other words, xtype and alias can actually be generalized to some extent.

I finally found a series of evidence in the source code of the Classmanager class. To put it simply, Xtype is an alias that exists under the widget namespace. If the xtype is declared for a new UI composition, it is equivalent to declaring an alias for it under the widget namespace. For example, we can also define the Coolpanel class we just saw by using the following code:

1 ext.define (' Myapp.coolpanel ', {2     Extend: ' Ext.panel.Panel ',3     xtype: ' Coolpanel ',4     title: ' yeah! ' 5 });

In general, specifying a xtype for a UI component is actually equivalent to assigning it an alias under the widget namespace. But alias can cover a much wider range of types than xtype. An alias can be used to declare not only the various types of namespaces as widgets, but also the types under many namespaces, such as Plugin,proxy,layout.

In the Sencha Forum, a developer also explains why an additional xtype is defined when alias already exists. This is just to improve performance. In the internal implementation of ExtJS, it is often necessary to split the namespace in alias to get the type of widget you need to create. With the help of Xtype, ExtJS can get rid of time-consuming string analysis work, which improves performance.

So when defining a custom widget, we should use xtype, and when we define other components, we have to use alias. Since all widgets use the same namespace, we need to flag a prefix when specifying xtype for a custom widget, such as the xtype of a custom button defined in Project Egoods should be Egoods-button.

References

All the examples in this article are from the official ExtJS document: http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/

ExtJS in Review-xtype vs. alias