He estado tratando de averiguar qué es lo que se requiere en Ext JS 4, y parece que no puedo encontrar una respuesta razonable. Digamos que tengo el siguiente código:Ext JS 4: ¿De qué sirve?
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'}
]
});
app/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'}
]
});
app/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';
}
});
app /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 completamente lo que estaba haciendo. Utils se basa en Utils2 porque necesita llamar a la variable hello de Utils2. El resto del código está configurando una grilla y llamando a la función Utils.getText en TheStore. Firebug arroja 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 Utils no? Pensé que requería traer las clases que necesitaba, lo que me permitía usarlas, pero creo que estoy equivocado. He leído los documentos de Sencha y una multitud de temas, pero nada realmente tiene 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 tonterías aquí, pero es solo por un ejemplo, así que no estoy buscando combinar los Utils globales o no usar globales en absoluto ... Solo estoy tratando de descubrir la opción requiere.
ACTUALIZACIÓN
Gracias a la respuesta de Izhaki a continuación, pensé en algo. Si quiero usar una clase requerida en una clase que estoy definiendo, tendría que esperar a que se creara el objeto (IE, use initComponent), así que mi código de tienda y cuadrícula cambia a:
app/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á ocupando de todos los requisitos porque puedo usar Test.Utils en TheGrid, pero TheGrid no declara específicamente que requiere Test.Utils.
Además, this example de los documentos de Sencha me hace más confuso porque evidentemente 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).
Me gusta esta respuesta, pero quedan algunas cosas sin explicar (vea mi sección actualizada de la pregunta). – incutonez
En cuanto a su primera pregunta nueva: Realmente no necesita solicitar TheModel en TheStore (específicamente como lo tiene en la configuración de su modelo, que es lo mismo que requerirlo, pero no obtiene setters y getters con require) Tampoco necesita tener que solicitar en TheGrid, como dijo, el controlador se está ocupando de todo esto. – Izhaki
Básicamente cuando se inicia la aplicación, carga dinámicamente y crea una instancia de todos los controladores y todos los modelos/vistas/tiendas a los que se hace referencia en los objetos de configuración correspondientes. Una vez hecho esto, todos estos entran en el alcance (incluidos los puntos de vista xtypes). – Izhaki