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

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

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

Источник

3 ответа

Решение

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

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

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

http://docs.sencha.com/extjs/4.2.0/

Источник

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

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

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

Например

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'                
        }]

    }
    ];
}
});

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

http://docs.sencha.com/extjs/4.1.3/

Источник

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

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

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

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

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

http://docs.sencha.com/extjs/4.2.0/ http://docs.sencha.com/extjs/3.4.0/

Спасибо

Источник
Другие вопросы по тегам