Ext JS 4: Jaki jest cel wymagań?

Question

Próbowałem dowiedzieć się, co wymaga w Ext JS 4, i nie wydaje mi się, aby wymyślić rozsądną odpowiedź. Powiedzmy, że mam następujący kod:

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/kontroler/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/store/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/model/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'; 
    } 
}); 

aplikacji /Utils2.js

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

Zdaję sobie sprawę, że jest to naprawdę długi przykład, ale musiałem się upewnić, że w pełni przedstawiłem to, co robię. Utils opiera się na Utils2, ponieważ musi wywoływać hello zmienną Utils2. Reszta kodu ustawia siatkę i wywołuje funkcję Utils.getText w TheStore. Firebug rzuca Test.Utils is undefined na linii 6 w TheStore.js iw tym momencie Test.Utils oczywiście nie istnieje, ale Test.Utils2 ma.

Moje pytanie brzmi ... dlaczego istnieje Utils2, ale Utils nie? Sądziłem, że wymaga to zajęć, których potrzebowałem, co pozwoliło mi je wykorzystać, ale myślę, że się mylę. Czytałem dokumenty Sencha i mnóstwo wątków, ale nic naprawdę nie miało sensu i tak naprawdę nie wyjaśnia tego przykładu. Czy ktoś może rzucić tutaj pewien wgląd? Byłbym wdzięczny.

** Ponadto zdaję sobie sprawę, że robię tu pewne głupie rzeczy, ale to tylko przykład, więc nie zamierzam łączyć globalnych narzędzi ani używać globali w ogóle ... po prostu próbuje znaleźć opcję wymagającą.

UPDATE

Dzięki za odpowiedź Izhaki poniżej Pomyślałem coś. Jeśli chcę użyć wymaganej klasy w klasie, którą definiuję, musiałbym poczekać, aż obiekt zostanie utworzony (IE, użyję initComponent), więc mój sklep i kod siatki zmieni się na:

aplikacja/sklep/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'} 
    ]); 
    } 
}); 

to działa, ale moje ostatnie pytanie jest ...czy muszę mieć wymagania dla TheModel w TheStore i/lub TheStore w TheGrid? Wygląda na to, że TheController zajmuje się wszystkimi tymi wymaganiami, ponieważ mogę używać Test.Utils w grze TheGrid, ale TheGrid nie oświadcza, że ​​wymaga Test.Utils.

Ponadto, z dokumentacji Sencha jestem bardziej zdezorientowany, ponieważ wyraźnie nie używam Test.Utils, dopóki nie zostanie utworzony Magazyn, ale ten przykład wygląda na to, że może używać klasy Dziecko bez czekania na jej zainicjowanie (przy użyciu initComponent).

Answer 1

To właściwie nie jest głupie pytanie.

Możesz zajrzeć wymaga jako sposób powiedzieć ExtJS:

„Podczas konstruowania obiektu tej klasy, upewnij się dynamicznie załadować wymaganych skryptów pierwszy”.

Masz rację o tej linii:

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

nie są potrzebne w app.js, Powodem jest to, że aplikacja ma już:

controllers: ['TheController'], 

która jest taka sama jak mówią potrzebują js skrypt, w którym znajduje się TheController (jakakolwiek definicja modelu/widoku/kontrolera/sklepu oznacza również, że wymagane skrypty są wymagane, tj. będą ładowane dynamicznie).

TheController posiada:

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

który załaduje je dynamicznie - to dlaczego ten sam requires nie jest to app.js potrzebne;

Powodem masz Firebug rzucanie Test.Utils jest niezdefiniowana jest to, że dają config (hello) z odniesieniem do obiektu, który nie jest jeszcze załadowane dynamicznie - nie ma Test.Utils w zakresie aż TheStore jest skonstruowany.

Answer 2

1. relacje hasMany po prostu nie działa bez niego

2. Pomaga JSBuilder wiedzieć, które pliki mają zostać uwzględnione. Jeśli na przykład rzutnia korzysta z układu obramowania, zostanie niepoprawnie pominięty i musisz użyć zastosowań lub wymaga ich uwzględnienia.