Ext JS 4: в чем смысл требований?
я пытался выяснить, что требуется делает в 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!'
}]
});
}
});
app / controller / 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'}
]
});
приложение / модель / 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'
});
Я понимаю, что это это действительно длинный пример, но мне нужно было убедиться, что я полностью изобразил то, что я делал. Utils полагается на Utils2, потому что ему нужно вызвать переменную hello Utils2. Остальная часть кода настраивает сетку и вызывает Utils.функция getText в хранилище. Поджигатель бросает!--9--> на линии 6 в TheStore.js, и в этот момент времени, тест.Здесь, очевидно, не существует, но тест.Utils2 делает.
мой вопрос... почему utils 2 существует, а Utils-нет? Я думал, требуется привез нужные мне предметы, что позволило мне ими пользоваться, но, видимо, я ошибаюсь. Я читал документы Sencha и множество потоков, но ничего действительно не имело смысла, и это действительно не объясняет этот пример. Может ли кто-нибудь пролить здесь немного света? Я был бы признателен.
обновление
спасибо ответ Izhaki ниже, я кое-что выяснил. Если я хочу использовать требуемый класс в классе, который я определяю, мне придется ждать создания объекта (т. е. использовать initComponent), поэтому мой код хранилища и сетки изменяется на:
app / store / 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'}
]);
}
});
это работает, но мой последний вопрос... должен ли я иметь необходимые для TheModel в TheStore и/или TheStore в TheGrid? Похоже, что TheController заботится обо всех этих требованиях, потому что я могу использовать тест.Utils в TheGrid, но TheGrid конкретно не указывает, что он требует тестирования.А utils.
и из документов Sencha делает меня более запутанным, потому что я явно не использую тест.Utils до создания TheStore, но этот пример, похоже, может использовать дочерний класс без нужно дождаться его инициализации (используя initComponent).
2 ответов
на самом деле это вовсе не глупый вопрос.
вы можете посмотреть на requires как способ сказать 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
не определено, что вы даете config (hello
) со ссылкой на объект, который еще не подгружено - нет Test.Utils
в объеме до есть.
hasmany отношения просто не работают без него
это помогает JSBuilder знать, какие файлы включать. Например, если ваш видовой экран использует макет границы, он неправильно не будет включен, и вы должны использовать uses или required для его включения.