javascript - samples - ExtJS: ¿Cuál es el punto de requiere?

sencha extjs samples

Question

He estado tratando de averiguar qué es lo que requiere Ext JS 4, y parece que no puedo encontrar una respuesta razonable. Digamos que tengo el siguiente código:

app.js

Ext.Loader.setConfig({
  enabled: true
});

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

Ext.application({
  name: ''Test'',
  appFolder: ''app'',
  controllers: [''TheController''],
  requires: [''Test.Utils'', ''Test.Utils2''],  // I don''t think this does anything... couldn''t find this option for Ext.application
  launch: function() {
    Ext.create(''Ext.Viewport'', {
      layout: ''border'',
      items: [{
        xtype: ''thegrid'',
        region: ''center'',
        title: ''blah!''
      }]
    });
  }
});

aplicación / controlador / TheController.js

Ext.define(''Test.controller.TheController'', {
  extend: ''Ext.app.Controller'',
  models: [''TheModel''],
  stores: [''TheStore''],
  views: [''TheGrid''],
  init: function() {
  }
});

app / view / TheGrid.js

Ext.define(''Test.view.TheGrid'', {
  extend: ''Ext.grid.Panel'',
  alias: ''widget.thegrid'',
  requires: [''Test.store.TheStore''],
  store: ''TheStore'',
  columns: [
    {header: ''Name'', dataIndex: ''name''},
    {header: ''Phone'', dataIndex: ''phone''},
    {header: ''Hello'', dataIndex: ''hello''}
  ]
});

aplicación / tienda / TheStore.js

Ext.define(''Test.store.TheStore'', {
  extend: ''Ext.data.Store'',
  requires: [''Test.model.TheModel'', ''Test.Utils''],
  model: ''Test.model.TheModel'',
  data: [
    {name: ''keanu reeves'', phone: ''1800matrices'', hello: Test.Utils.getText()},
    {name: ''james earl jones'', phone: ''1800starwar'', hello: ''nothing here''},
    {name: ''barack obama'', phone: ''1800prsidnt'', hello: ''hello world''}
  ]
});

aplicación / modelo / TheModel.js

Ext.define(''Test.model.TheModel'', {
  extend: ''Ext.data.Model'',
  fields: [
    {name: ''name'', type: ''string''},
    {name: ''phone'', type: ''string''},
    {name: ''hello'', type: ''string''}
  ]
});

app / Utils.js

Ext.define(''Test.Utils'', {
  singleton: true,
  requires: [''Test.Utils2''],
  getText: function() {
    return Test.Utils2.hello + ''world'';
  }
});

aplicación / Utils2.js

Ext.define(''Test.Utils2'', {
  singleton: true,
  hello: ''hello''
});

Me doy cuenta de que este es un ejemplo muy largo, pero necesitaba asegurarme de retratar lo que estaba haciendo. Utils confía en Utils2 porque necesita llamar a la variable hello de Utils2. El resto del código está configurando una cuadrícula y llamando a la función Utils.getText en TheStore. Firebug lanza un Test.Utils is undefined en la línea 6 en TheStore.js, y en ese momento, Test.Utils obviamente no existe, pero Test.Utils2 sí.

Mi pregunta es ... ¿por qué existe Utils2, pero no Utils2? Pensé que es necesario incluir las clases que necesitaba, lo que me permite usarlas, pero supongo que estoy equivocado. He leído los documentos de Sencha y una multitud de hilos, pero nada realmente tenía sentido, y realmente no explica este ejemplo. ¿Alguien puede arrojar alguna idea aquí? Lo apreciaría.

** Además, me doy cuenta de que estoy haciendo algunas cosas tontas aquí, pero es solo un ejemplo, así que no busco combinar los Utils globales o no usar los globales en absoluto ... Solo estoy tratando de averiguar La opción requiere.

ACTUALIZAR

Gracias a la respuesta de Izhaki a continuación, descubrí algo. Si quiero usar una clase requerida en una clase que estoy definiendo, tendría que esperar a que se cree el objeto (IE, use initComponent), por lo que mi tienda y el código de cuadrícula cambian a:

aplicación / tienda / TheStore.js

Ext.define(''Test.store.TheStore'', {
  extend: ''Ext.data.Store'',
  requires: [''Test.model.TheModel''],
  model: ''Test.model.TheModel''
});

app / view / TheGrid.js

Ext.define(''Test.view.TheGrid'', {
  extend: ''Ext.grid.Panel'',
  alias: ''widget.thegrid'',
  requires: [''Test.store.TheStore''],
  store: ''TheStore'',
  columns: [
    {header: ''Name'', dataIndex: ''name''},
    {header: ''Phone'', dataIndex: ''phone''},
    {header: ''Hello'', dataIndex: ''hello''}
  ],
  // This is the change that works
  initComponent: function() {
    this.callParent();
    this.store.loadData([
      {name: ''keanu reeves'', phone: ''1800matrices'', hello: Test.Utils.getText()},
      {name: ''james earl jones'', phone: ''1800starwar'', hello: ''nothing here''},
      {name: ''barack obama'', phone: ''1800prsidnt'', hello: ''hello world''}
    ]);
  }
});

Esto funciona, pero mi última pregunta es ... ¿tengo que tener los requisitos para TheModel en TheStore y / o TheStore en TheGrid? Parece que TheController se está encargando de todos esos requisitos porque puedo usar Test.Utils en TheGrid, pero TheGrid no declara específicamente que requiere Test.Utils.

Además, este ejemplo de los documentos de Sencha me confunde más porque claramente no estoy usando Test.Utils hasta que se crea TheStore, pero este ejemplo parece que puede usar la clase Child sin tener que esperar a que se inicialice (usando initComponent) .

Answer 1

1. HasMany relaciones simplemente no funcionan sin él

2. Ayuda a JSBuilder a saber qué archivos incluir. Por ejemplo, si su Viewport usa un diseño de borde, no se incluirá incorrectamente, y usted tiene que usar usos o requiere incluirlo.

Answer 2

Esto en realidad no es una pregunta tonta en absoluto.

Puedes ver los requisitos como una manera de decirle a ExtJS:

"Cuando construye un objeto de esta clase, asegúrese de cargar dinámicamente los scripts requeridos primero".

Tienes razón sobre esta línea:

requires: [''Test.Utils'', ''Test.Utils2''],

Al no ser necesario en app.js , la razón es que la aplicación ya tiene:

controllers: [''TheController''],

que es lo mismo que decir que necesita el script js en el que reside TheController (cualquier definición de modelo / vista / controlador / tienda también significa que los scripts relacionados son necesarios, es decir, se cargarán dinámicamente).

TheController tiene:

requires: [''Test.model.TheModel'', ''Test.Utils''],

que los cargará dinámicamente, por eso no es necesario lo mismo que app.js ;

La razón por la que obtiene Firebug arrojando Test.Utils no está definido es que proporciona una configuración ( hello ) con una referencia a un objeto que aún no está cargado dinámicamente; no hay Test.Utils en el alcance hasta que se construya TheStore .