EXTJS - Ext.require и onReady() для внутренних скриптов

Question

У меня есть файл app.js, который загружается из основного файла html. Теперь этот файл app.js после щелчка ссылок, определенных в нем, динамически загружает второй файл js, используя Ext.require(). Загрузка происходит нормально, поскольку я определил Ext.Loader.setPath() и т. Д., Второй скрипт содержит строки, такие как Ext.require(), чтобы импортировать некоторые библиотеки ui, а затем onReady(), моя проблема включена. Ready никогда не запускается, и я не может поместить код визуализации виджета вне onReady(). does onReady работает только для синхронной загрузки скриптов?

Спасибо большое

Answer 1

onReady будет только когда огонь один раз для вашего приложения.

Если вы посмотрите на документы, которые вы увидите Ext.require() может принимать функцию обратного вызова:

Ext.require('My.foo.Bar', function() { 
    console.log('do something'); 
}); 

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext-method-require

Answer 2

Как говорит Эван, Ext.onReady только огонь для нагрузки страницы HTML в первый раз.

Если вы используете ExtJS 4, загрузка ваших скриптов из app.js обычно попадает в шаблон MVC.

Практически это означает, что ваши контроллеры инициализированы из вашего приложения.js, а затем эти контроллеры несут ответственность за обработку вашего кода, который вы обычно помещаете внутри onReady() для привязки функций к событиям. Концепция «взглядов» - это то, где вы поместите свой код виджетов.

E.g.

app.js

Ext.application({ 
name: 'MyApp', 
appFolder: '/MyApp/Scripts', 
autoCreateViewport: true, 
requires: [ 
    //data 
    'ALES.controller.MyController', 
] 
}); 

MyController.js

Ext.define('ALES.controller.MyController', { 
extend: 'Ext.app.Controller', 

id: 'MyController', 
views: [ 
    'MyView' 
], 
stores: [ 
    'MyStore' 
], 
init: function() { 
    this.control(
     { 
      'panel > button': { click: this.myClickHandler } 
     }); 

}); 

MyView.js

Ext.define('MyApp.view.MyView', { 
extend: 'Ext.form.Panel', 

id: 'MyView', 

requires: [ 
    'Ext.grid.plugin.CellEditing' //or other Ext stuff you want to include 
], 

constructor: function (config) { 
    this.initConfig(config); 
    return this.callParent(arguments); 
}, 

initComponent: function() { 

    Ext.apply(this, { 
     items: this.createControls() 
    }); 

    this.callParent(); 

}, 

createControls: function() { 
    return [{ 
     xtype: 'panel', 
     items: [{ 
      xtype: 'button'     
     }] 

    } 
    ]; 
} 
}); 

В некоторых приличном графическом интерфейсе дез на сайте сенча, который я рекомендую прочитать для более глубокого понимания:

http://docs.sencha.com/extjs/4.1.3/#!/guide/application_architecture

Answer 3

Ext.onReady похож как document.ready.

Целью события готовности (Ext.onReady) является то, что оно должно происходить как можно раньше после загрузки документа, так что код, добавляющий функциональность к элементам на странице, не должен ждать всех (например, изображения, стили и т. д.)

О программе "Ext.require()". require - это псевдоним для Ext.Loader.require, в котором указано, что он загружает все классы по заданным именам в() и все их прямые зависимости; опционально выполняет заданную функцию обратного вызова при завершении в пределах дополнительной области. Как просто, мы можем сказать, что загрузка классов для инициализации рендеринга.

Чтобы ответить на вопрос «работает onReady только для синхронной загрузки скриптов?» .... Да, он будет работать синхронно, пока он не загрузит свой необходимый класс в двигатель. Одна из основных целей использования Ext.require() - сначала загрузить класс require, чтобы быстро сделать наш компонент.

см ссылку ниже для справки

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext http://docs.sencha.com/extjs/3.4.0/#!/api/Ext-method-onReady

Благодарности