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

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.

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.

dfox

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

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'
    }
});

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.

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'],

来源：https://stackoverflow.com/questions/10308018/how-do-you-include-a-ux-class-in-the-mvc-pattern

标签

extjs

gridpanel