Question

我有一个从主html文件加载的app.js文件。现在这个app.js文件点击其中定义的链接，使用Ext.require（）动态加载第二个js文件。加载发生正常，因为我已经定义了Ext.Loader.setPath（）等，第二个脚本包含诸如Ext.require（）之类的行来导入一些ui库，然后是onReady（），我的问题是onReady永远不会被触发，而我无法将小部件呈现代码放在onReady（）之外。 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

正如Evan所说，Ext.onReady只会在第一次激活HTML页面时加载。

如果您正在使用ExtJS 4，那么从app.js加载脚本通常会落入MVC模式。

实际上这意味着您的控制器是从您的app.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'                
        }]

    }
    ];
}
});

在sencha网站上有一些不错的指南，我建议你阅读以获得更深入的了解：

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

Answer 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/#!/api/Ext http://docs.sencha.com/extjs/3.4.0/#!/api/Ext-method-onReady

由于

EXTJS - 内部脚本的Ext.require和onReady（）

3 个答案: