Ext JS 4: Какой смысл?

Question

Я пытался выяснить, что требуется в Ext JS 4, и я не могу придумать разумный ответ. Скажем, у меня есть следующий код:

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

приложение/контроллер/TheController.js

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

приложение/просмотр/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'} 
    ] 
}); 

приложение/магазин/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'} 
    ] 
}); 

приложение/модель/TheModel.js

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

приложение/Utils.js

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

приложение /Utils2.js

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

Я понимаю, что это очень длинный пример, но мне нужно было убедиться, что я полностью изобразил то, что делаю. Utils полагается на Utils2, потому что ему нужно вызвать hello-переменную Utils2. Остальная часть кода настраивает сетку и вызывает функцию Utils.getText в TheStore. Firebug выбрасывает Test.Utils is undefined в строке 6 в TheStore.js, и в этот момент Test.Utils явно не существует, но Test.Utils2 делает.

Мой вопрос: почему Utils2 существует, но Utils нет? Я думал, что мне нужны были классы, которые мне нужны, что позволило мне использовать их, но я думаю, что я ошибаюсь. Я читал документы Sencha и множество потоков, но ничего не имело смысла, и на самом деле это не объясняет этот пример. Может ли кто-нибудь пролить прозрение? Буду признателен.

** Кроме того, я понимаю, что я делаю некоторые немые вещи здесь, но это всего лишь пример, поэтому я не собираюсь совмещать глобальные Utils или вообще не использовать глобальные ... Я просто пытаясь определить требуемый вариант.

UPDATE

Благодаря ответ Izhaki в поле ниже, я понял что-то. Если я хочу использовать требуемый класс в классе, который я определяю, мне придется подождать, пока объект будет создан (IE, используйте initComponent), поэтому мой код магазина и сетки изменяется на:

приложение/магазин/TheStore.js

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

приложение/просмотр/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'} 
    ]); 
    } 
}); 

Это работает, но мой последний вопрос ...у меня должны быть требования для TheModel в TheStore и/или TheStore в TheGrid? Кажется, что TheController заботится обо всех этих требованиях, потому что я могу использовать Test.Utils в TheGrid, но TheGrid не указывает, что для этого требуется Test.Utils.

Кроме того, this example из документов Sencha меня смущает, потому что я явно не использую Test.Utils до создания TheStore, но этот пример кажется, что он может использовать класс Child, не дожидаясь его инициализации (используя initComponent).

Answer 1

Это на самом деле не глупый вопрос.

Вы можете посмотреть, как требует способ сказать ExtJS:

«Когда вы строите объект этого класса, пожалуйста, убедитесь, чтобы динамически загружать требуемые сценарии первыми».

Вы правы этой линии:

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

не требуется в app.js, Причина в том, что приложение уже есть:

controllers: ['TheController'], 

который является таким же, как говорят вам требуется JS сценарий, в котором находится TheController (любое определение модели/представления/контроллера/хранилища также означает, что требуются связанные скрипты, т.е. будут динамически загружаться).

TheController имеет:

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

, который будет загружать эти динамически - это почему же requires не требуется его app.js;

Причина вы получаете Firebug метания Test.Utils не определено, что вы даете конфиг (hello) с ссылкой на объект, который не динамически загружаемой - нет Test.Utils в объеме до TheStore строится.

Answer 2

1. HasMany отношение просто не работает без него

2. Это помогает JSBuilder знать, какие файлы включить. Например, если ваш Viewport использует макет границы, он будет некорректно не включен, и вы должны использовать его или потребовать его включения.