How do you include a UX class in the MVC pattern?

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({enabl         


        

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.

Answer 2

Extjs 6, using the MVVC and the sencha cmd. I used the sencha generate app to start an app. I coded to the point where I wanted to use the ItemSelector, modified the app.json to require a block added in the ux:

"requires": [
  "font-awesome",
  "ux"
],

In my controller code where I wanted to create the ItemSelector widget:

requires: [
    'Ext.ux.form.MultiSelect',
    'Ext.ux.form.ItemSelector'
],

and the appropriate code to create the ItemSelector. One issue I had is, that it wants a real data store with a model and I could not use mocked up data.

Then I did a sencha app build

Answer 3

You can combine the Loader params together, making it all easy to read and understand app / file structure. I believe what is happening is you're missing the definition of where library files and app files are - all relative to app.js. Thus when you're loading, the app is trying to use files based off the primary namespace path (extjs/src) instead of application root.

Ext.Loader.setConfig({
    enabled : true,
    paths: {
        'Ext'    : 'extjs/src', // library src folder/files
        'MyApp'  : 'app',       // app namespace folder/files
        'Ext.ux' : 'ux'         // extension namespace folder/files
    }
});

The same process works for touch as well - just swap "extjs" for "touch".

If using Architect, you need to select Application, add a Loader (config panel). This will offer a Loader with a path object that can be modified. The enabled option is a checkbox option, defaulting to true.

EDIT: Something I didn't make clear is that the library source and application files do not need to be defined in most cases, especially using default layout of files. This following snippet is often ample:

Ext.Loader.setConfig({
    enabled : true,
    paths: {
        'Ext.ux' : 'ux'
    }
});

Answer 4

In my case (using ux/DataTip.js), with ext-4.2.1.883 and sencha cmd 4.0.2.67, I was able to use Ext.ux classes with the provided solution, using:

Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');

But the sencha app refresh complains, with:

[ERR] C2008: Requirement had no matching files (Ext.ux.DataTip)

Coping/linking extjs/examples/ux to extjs/src/ux solve my problem. The application works and sencha cmd is also able to keep track of things. With this copy/link operation, there is no need to use Ext.Loader.setPath. Just use the class in the requires:

Ext.define('Demo.Application', {
name : 'Demo',
requires : [ (...), 'Ext.ux.DataTip'],

Answer 5

This sounds like a problem with the path that the Ext.ux.grid.FiltersFeature file lies in. Can you check what the URL for the request that resulted in the 404 is? That should give you a clue as to where to place the Ext.ux.grid.FiltersFeature for it to be automatically loaded.

Here is an example of the directory structure that I am using and where the ux classes are.

js
|---app.js
|
|---app
|    |---controller
|    |---model
|    |---store
|    +---view
|
+---ux
     |---form
     +---layout

Basically, the namespacing will follow the directory structure.