¿Cómo se incluye una clase UX en el patrón MVC?

Question

Antes de que el patrón MVC me gustaría incluir clases UX simplemente mediante la inclusión de este en la parte superior de la JS, antes de Ext.onReady:

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

Ahora estoy trabajando con el patrón MVC y tengo una gridpanel que necesita para utilizar este misma característica. He incluido una declaración requiere en la vista de la siguiente manera:

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

embargo, la aplicación produce un error 404 cuando se inicia por primera vez de cargar con esto.

¿Alguna idea?

EDIT:

He intentado poner este mismo bloque de código en la parte superior de la vista también en vano (en referencia al bloque Ext.Loader.setConfig/.setPath).

El cargador sigue tratando de cargar clases UX desde extjs/src/ux/ sin importar cómo intente decir lo contrario. De acuerdo con this suggestion, también he intentado definir una propiedad de ruta en mi controlador de aplicación pero parece que lo que sea que el contestador vio en la fuente en ese momento no existe en 4.1 rc3 porque no puedo encontrarlo y no funciona .

Si acabo de agregar el FilterFeature.js como un archivo fuente importado en mi HTML con <script> etiquetas, entonces todas sus dependencias obtienen errores 404 cuando se inicia mi aplicación.

Debe haber una forma simple de incluir clases UX en una aplicación directamente desde la carpeta UX para que pueda vincular a otras dependencias UX.

Answer 1

Ok Lo encontré en this post.

sólo tiene que utilizar Ext.Loader.setPath llamada en la parte superior del controlador de aplicación, por ejemplo:

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

O donde usted quiere poner las clases UX, para condensar los propósitos, las clases UX específicas de aplicaciones debe estar sacada y metió en su propia carpeta algo así como app/ux como cubre la publicación.

Answer 2

Esto suena como un problema con la ruta en la que se encuentra el archivo Ext.ux.grid.FiltersFeature. ¿Puede verificar cuál es la URL de la solicitud que dio como resultado el 404? Eso debería darte una pista sobre dónde colocar el Ext.ux.grid.FiltersFeature para que se cargue automáticamente.

Aquí hay un ejemplo de la estructura de directorios que estoy usando y donde están las clases ux.

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

Básicamente, el namespacing seguirá la estructura de directorios.

Answer 3

Puede combinar los parámetros de cargador juntos, facilitando la lectura y comprensión de la estructura de la aplicación/archivo. Creo que lo que está sucediendo es que te falta la definición de dónde están los archivos de la biblioteca y los archivos de la aplicación, todo lo relacionado con app.js. Por lo tanto, cuando está cargando, la aplicación está tratando de usar archivos basados ​​en la ruta del espacio de nombres primario (extjs/src) en lugar de la raíz de la aplicación.

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

El mismo proceso funciona también para el tacto - simplemente cambie "extjs" por "touch".

Si utiliza Architect, debe seleccionar Application, add a Loader (panel de configuración). Esto ofrecerá un cargador con un objeto de ruta que se puede modificar. La opción habilitada es una opción de casilla de verificación, por defecto es verdadera.

EDIT: Algo que no dejé en claro es que los archivos fuente de la fuente y la aplicación no necesitan ser definidos en la mayoría de los casos, especialmente usando el diseño predeterminado de los archivos. Este fragmento siguiente es a menudo un amplio:

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

Answer 4

En mi caso (usando ux/DataTip.js), con ext-4.2.1.883 y sencha cmd 4.0.2.67, yo era capaz de utilizar Ext.ux clases con la solución aportada, usando:

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

Pero el sencha app refresh se queja, con:

[ERR] C2008: Requisito no tenía archivos coincidentes (Ext.ux.DataTip)

Copia/vinculación extjs/examples/ux a extjs/src/ux resolver mi problema. La aplicación funciona y sencha cmd también es capaz de realizar un seguimiento de las cosas. Con esta operación de copia/enlace, no es necesario usar Ext.Loader.setPath. Simplemente use la clase en la require:

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

Answer 5

Extjs 6, usando el MVVC y el sencha cmd. Usé la aplicación sencha generate para iniciar una aplicación. codifiqué hasta el punto en que quería utilizar la ItemSelector, Modificado el app.json para requerir un bloque añadido en el ux:

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

En mi código del controlador donde quería crear el widget ItemSelector:

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

y el código apropiado para crear el ItemSelector. Un problema que tuve es que quiere una verdadera tienda de datos con un modelo y no pude usar datos falsos.

luego hice una aplicación sencha construir