Replacing Ext.reg() (xtype) in ExtJS4?

Question

I want to use the MultiSelect from 3.3 in Ext JS 4, as described in this previous question:

Why are the Ext JS multiselect item selector files not included in the Ext JS 3.3 download and where are they?

It seems like the way to register xtypes has changed in Ext JS 4. When I try to import this widget,along with ItemSelector.js, I get an error on Ext.reg().

Ext.reg('multiselect', Ext.ux.form.MultiSelect);

//backwards compat
Ext.ux.Multiselect = Ext.ux.form.MultiSelect;

How do I change wdigets to get them to work in Ext JS 4?

Answer 1

The Ext JS 4 way is to use the new class system to create your widget: http://www.sencha.com/blog/countdown-to-ext-js-4-dynamic-loading-and-new-class-system/

Make sure you assign your widget an alias using the "widget" namespace. For example:

Ext.define('Ext.ux.form.MultiSelect', {
    extend: 'ClassNameYouAreExtending',
    alias: 'widget.multiselect'
});

Then you can refer to the widget by the xtype 'multiselect'. When you use an xtype in Ext JS 4 it looks for a class with an alias of 'widget.[xtype]'.

Answer 2

You will have to modify the code to get the MultiSelect component running on ExtJS 4. Here are few changes that you will have to do:

1. Class definition. ExtJS 3.x used Ext.extend to extend. With the new version, you will have to use Ext.define

2. In the new version, you can represent a class name as string. Due to this, I think you will not require the Ext.reg method anymore. The Component Manager class to not have register function.

Answer 3

Well, you're diving into pre-beta territory, so to some extent you're going to have to look at code and figure it out. There is some explanation of the new class system in the blog post introducing it, and there will be a comprehensive migration guide before 4.0 final comes out. I would definitely pursue this in the Sencha 4.0 forums though since that's where all the Ext 4 experts will be hanging out.