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，因为它需要调用Utils2的hello变量。其余的代码是设置一个网格并在TheStore中调用Utils.getText函数。萤火虫投在TheStore.js线6 Test.Utils is undefined，并且在那个时间点，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'} 
    ]); 
    } 
}); 

这工作，但我的最后一个问题是......我是否需要TheStore中的TheModel和/或TheGrid中的TheStore？看起来像TheController正在照顾所有这些需求，因为我可以在TheGrid中使用Test.Utils，但TheGrid没有明确说明它需要Test.Utils。

另外，来自Sencha docs的this example让我更加困惑，因为在创建TheStore之前我显然没有使用Test.Utils，但是这个例子似乎可以使用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;

你扔萤火虫是Test.Utils未定义的原因是，你给一个配置（hello）与到尚未动态加载的对象的引用 - 有在范围没有Test.Utils直到TheStore构造。

Answer 2

1. 的hasMany关系，根本就没有工作，没有它

2. 它有助于JSBuilder知道哪些文件要包括。例如，如果您的视口使用边界布局，则它将错误地不包含在内，并且您必须使用用途或要求来包含它。