Unrecognized class name / alias widget.combobox (hiddenfield, fieldcontainer, ...)

Question

During development I run my application by "sencha app watch" and I had no errors. But when I build my app by "sencha app build testing" I got the error for different standart components: for combobox, hiddenfield, fieldcontainer. I've solved it by adding component class names into "require" section. My question: why I have to do this trick? And what is wrong with this fields? Because for textfield I hadn't got any errors. I use ext js 6.2.0. gpl version

Answer 1

Requires: Loads all classes by the given names and all their direct dependencies.

This error is very common and it generally happens because the required Ext component is not loaded or one of its direct dependencies are not loaded before using the component.

1. In a development set up, we have the Ext setup in our workspace
   generally making it easy to pull the dependencies required.

2. In a production or testing case, it is unable to load the file or load one of its direct dependencies causing this issue.

3. Mainly these dependencies are dynamically loaded.

It always a best practice to make sure you use requires for any component you use.

This implies that there is nothing wrong with any of the components just some load issue most because of the way they are internally bundled.

Answer 2

When you use the development version of ExtJS, it is based on the app-all.js, which contains most, if not all, ExtJS classes, and has a size of 2 MB minified (9 MB unminified). So once that file is loaded, they are all fully available.

When you compile a version of ExtJS, Sencha Cmd builds a dependency tree of the required classes to keep the size of the resulting app.js down to a minimum (in my app, it's 1.1 MB minified). For this dependency tree, it starts at the app.js file and considers definitions in the classes:

• extend
• override
• requires
• uses

and in the controllers:

• views
• stores
• models

but not elsewhere, e.g.:

• Ext.create() (which may be scattered around your code if you build your components dynamically)
• xtype in the component tree.