Ext JS 4: Qual è il punto di cui ha bisogno?

Question

Ho cercato di capire cosa richiede in Ext JS 4 e non riesco a trovare una risposta ragionevole. Diciamo che ho il seguente codice:

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

app/regolatore/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'} 
    ] 
}); 

app/negozio/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'} 
    ] 
}); 

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

app /Utils2.js

Mi rendo conto che questo è un esempio davvero lungo, ma avevo bisogno di assicurarmi di rappresentare pienamente quello che stavo facendo. Utils si basa su Utils2 perché ha bisogno di chiamare la variabile hello di Utils2. Il resto del codice sta configurando una griglia e chiamando la funzione Utils.getText in TheStore. Firebug getta un Test.Utils is undefined sulla linea 6 in TheStore.js e, in quel momento, Test.Utils ovviamente non esiste, ma Test.Utils2 lo fa.

La mia domanda è ... perché esiste Utils2, ma Utils no? Pensavo che fosse necessario portare le classi di cui avevo bisogno, permettendomi di usarle, ma suppongo di sbagliarmi. Ho letto i documenti Sencha e una moltitudine di thread, ma niente ha davvero senso, e in realtà non spiega questo esempio. Qualcuno può fare qualche intuizione qui? Si mi farebbe piacere.

** Inoltre, mi rendo conto che sto facendo alcune cose stupide qui, ma è solo per un esempio, quindi non sto cercando di combinare gli utili globali o non utilizzare affatto i globals ... Sono solo cercando di capire l'opzione richiede.

UPDATE

Grazie alla risposta di Izhaki sotto, ho capito qualcosa. Se voglio utilizzare una classe richiesta in una classe che sto definendo, dovrei aspettare che l'oggetto venga creato (IE, utilizzare initComponent), quindi il mio negozio e il codice di rete cambiano in:

app/negozio/TheStore.js

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

app/vista/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'} 
    ]); 
    } 
}); 

Questo funziona, ma la mia ultima domanda è ...devo avere i requisiti per TheModel in TheStore e/o TheStore in TheGrid? Sembra che TheController si prenda cura di tutti quelli necessari perché posso utilizzare Test.Utils in TheGrid, ma TheGrid non specifica in modo specifico che richiede Test.Utils.

Inoltre, this example dai documenti Sencha mi rende più confuso perché chiaramente non utilizzo Test.Utils fino a quando non viene creato TheStore, ma in questo esempio sembra che possa utilizzare la classe Child senza dover attendere l'inizializzazione (usando initComponent).

Answer 1

Questa non è in realtà una domanda stupida.

Potete guardare richiede come un modo per dire ExtJS:

"Quando si costruisce un oggetto di questa classe, si prega di assicurarsi di caricare dinamicamente gli script necessari prima".

Hai ragione su questa linea:

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

non essere necessaria in app.js, motivo è che l'applicazione ha già:

controllers: ['TheController'], 

che è lo stesso che dire sono necessari i js script in cui risiede TheController (qualsiasi definizione di modello/vista/controllore/archivio significa anche che gli script correlati sono obbligatori, cioè verrà caricato dinamicamente).

TheController ha:

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

che caricherà questi in modo dinamico - questo è il motivo per cui lo stesso requires non è necessaria esso app.js;

La ragione si ottiene Firebug gettando Test.Utils non è definito è che si dà un config (hello) con un riferimento a un oggetto che non è ancora caricato in modo dinamico - non c'è Test.Utils nel campo di applicazione fino a quando TheStore è costruito.

Answer 2

1. rapporti hasMany semplicemente non funzionano senza di essa

2. Aiuta JSBuilder sapere quali file includere. Ad esempio, se Viewport utilizza il layout dei bordi, non verrà inserito in modo errato e sarà necessario utilizzarli o richiederne l'inclusione.