Errors After Upgrading from EXTJS 4.2 to EXTJS 6.x

Question

So far, I've done the upgrade in two ways:

1) I set up a fresh sencha app generate [appName] and transferred the 4.2 files and directories to 6.x. After setting them up, an error occurs when doing a sencha app build:

The following error occurred while executing this line:
/var/www/html/backoffice-test/EcommBackoffice/.sencha/app/build-impl.xml:381: The following error occurred while executing this line:
/var/www/html/backoffice-test/EcommBackoffice/.sencha/app/init-impl.xml:382: com.sencha.exceptions.ExNotFound: Unknown definition for dependency : Ext.ux.grid.filters.Filters
rareyes@MAKDL-RAREYES:/var/www/html/backoffice-test/EcommBackoffice$

Along with this, upon loading the app, the console error is giving out these lines:

http://localhost:1841/EcommBackoffice/Overrides/view/Table.js?_dc=1452581765612`
http://localhost:1841/EcommBackoffice/Overrides/selection/Model.js?_dc=1452581765612`
[E] [Ext.Loader] Some requested files failed to load.
[E] [Loader] The following classes failed to load:
[E] [Loader] Overrides.view.Table from Overrides/view/Table.js
[E] [Loader] Overrides.selection.Model from Overrides/selection/Model.js
[E] [Loader] EcommBackoffice.Application from app/Application.js

2) Being stucked on the first one, my second approach was to simply do a sencha app upgrade -ext on the existing application. It successfully updated except when doing a sencha app build it gives out a similar error such as:

The following error occurred while executing this line:
/var/www/html/backoffice-2.0/src/main/webapp/.sencha/app/build-impl.xml:381: The following error occurred while executing this line:
/var/www/html/backoffice-2.0/src/main/webapp/.sencha/app/init-impl.xml:382: com.sencha.exceptions.ExNotFound: Unknown definition for dependency : Ext.ux.grid.FiltersFeature

and a short console error of: Uncaught ReferenceError: Ext is not defined

This occurs when I edit index.html and replace x-compile snippet:

<!-- <x-compile> -->

<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-all-debug-w-comments.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="app.js"></script>

<!-- </x-compile> -->

to this:

<script id="microloader" data-app="a32fd6d2-db0c-4c4b-a6a2-4185b3ee3fd4" type="text/javascript" src="bootstrap.js"></script>

Prior to editing index.html, a different error is being thrown with x-compile:

/.sencha/app/init-impl.xml:382: com.sencha.exceptions.ExBuild: Mixed-Mode x-compile and microload markup is currently unsupported

This is the reason why I opted for the supported Microloader provided by 6.x

I am quite on a lost here. ExtJS apparently has no proper Sencha guide to upgrade directly from 4.x to 6.x. It only does a one step higher upgrade such as 4.x to 5.x, and 5.x to 6.x. Even then, the guide for these are not very clear and IMHO, lacks documentation.

Anyone who can point where the problem is with the errors I provided?

Answer 1

Well, the Cmd error message says it loud and clear:

Unknown definition for dependency : Ext.ux.grid.filters.Filters

This means that ExtJS6 does not provide Ext.ux.grid.filter.Filters, which is required somewhere in your application.

As the Ext documentation states, everything from Ext.ux namespace is not upgrade-safe, because it is user-provided content that Sencha has found useful and added to the Ext zip file. Normally, you would just search the internet for available ExtJS 6.0.x implementations of the ux features that are missing from the official zip file; or write them yourself.

But for your special case, I believe that they moved gridfilters from ux into the official branch in ExtJS 4.2.x, then removed the alias in ExtJS 5, and finally, in ExtJS 6, they replaced the feature with a plugin.

So please have a look at Ext.grid.filters.Filters, I believe it does what you need, but you would have to rewrite parts of your code to make use of it. (change the require, move the reference from features to plugins, possibly account for other changes.)

I think that the second error message ("[E] [Ext.Loader] Some requested files failed to load.") means the same as the first one, and I would expect something like requires:['Ext.ux.grid.filters.Filters'] in Overrides/view/Table.js. (Overrides.selection.Model isn't loaded because it requires Overrides.view.Table, and EcommBackoffice.Application isn't loaded because it references Overrides.selection.Model)