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 в объеме до есть.


  1. hasmany отношения просто не работают без него

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