1

我有一个从主 html 文件加载的 app.js 文件。现在这个 app.js 文件在单击其中定义的链接时，使用 Ext.require() 动态加载第二个 js 文件。加载正常，因为我已经定义了 Ext.Loader.setPath() 等，第二个脚本包含诸如 Ext.require() 之类的行来导入一些 ui 库，然后是 onReady()，我的问题是永远不会触发 onReady，我不能将小部件渲染代码放在 onReady() 之外。onReady 仅适用于脚本的同步加载吗？

非常感谢

4

2 回答 2

4

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

于 2013-04-18T07:22:03.893 回答
2

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

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

这实际上意味着您的控制器是从您的 app.js 初始化的，然后这些控制器负责处理您通常放在 onReady() 中以将函数绑定到事件的代码。“视图”的概念是您放置小部件代码的地方。

例如

应用程序.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

于 2013-04-18T07:30:45.993 回答