Question

Before the MVC pattern I would include UX classes simply by including this at the top of the JS, before Ext.onReady:

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');
Ext.require([
    'Ext.ux.grid.FiltersFeature'
]);

Now I am working with the MVC pattern and I have a gridpanel that needs to use this same feature. I’ve included a requires statement in the view like this:

Ext.define('ST.view.StudentLog', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.studentlog',
    requires: [
        'Ext.ux.grid.FiltersFeature'
    ],

But the app produces a 404 error when it first starts loading with this.

Any ideas?

EDIT:

I’ve tried putting this same block of code at the top of the view also to no avail (referring to the Ext.Loader.setConfig / .setPath block).

The loader keeps trying to load UX classes from extjs/src/ux/ no matter how I try to tell it otherwise. According to this suggestion, I’ve also tried defining a path property in my app controller but it seems like whatever the answerer saw in the source back then doesn’t exist in 4.1 rc3 because I can’t find it and it doesn’t work.

If I just add the FilterFeature.js as an imported source file in my HTML with <script> tags then all of it’s dependencies get 404 errors when my app starts.

There must be a simple way of including UX classes in an app straight from the UX folder so that it can link to other UX dependencies.

Answer 1

Ok I found it from this post.

Just need to use Ext.Loader.setPath call at the top of the app controller, e.g.:

Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');
Ext.application({
    name: 'ST',
    autoCreateViewport: true,
    ...

Or wherever you want to put the ux classes, for condensing purposes, the app specific UX classes should be pulled out and stuck in your own folder something like app/ux as the post covers.