由于尚未定义 Ext.getBody() 导致的初始页面加载中的 ExtJS 错误答案

【问题标题】：ExtJS error in initial page load due to Ext.getBody() not yet being defined由于尚未定义 Ext.getBody() 导致的初始页面加载中的 ExtJS 错误
【发布时间】：2014-11-28 12:49:35
【问题描述】：

我正在尝试在 ExtJS 中创建一个对话框窗口来执行保存功能，但我在加载页面时遇到了问题。

代码窗口定义的一个（简化）示例是：

Ext.define('MyRequest.SaveDraftOrTemplateWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.saveDraftOrTemplateWindow',
    requires: ['Ext.toolbar.Toolbar'],
    modal: true,

    initComponent: function() {
        this.items = [ saveDraftOrTemplateForm ];
        Ext.apply(this, {
            dockedItems: [{
                xtype: 'toolbar',
                items: [
                    {
                        iconCls: 'saveas-draft',
                        text: '<b>Save</b>',
                        id: 'saveDraftTemplate',
                        handler: saveAsDraftRequest(textFieldDraftOrTemplateName.getValue(), checkBoxSaveAsTemplate.getValue()),
                        scope: this
                    }
                ]
            }]
        });
        this.callParent();
    }
});

function saveAsDraftRequest(draftName, isTemplate) {
    Ext.getBody().mask('Saving draft request...'); // Errors actually occurs on this line
}

// This line is the start of the stack causing the problem...
var saveDraftOrTemplateWindowInstance = Ext.create('MyRequest.SaveDraftOrTemplateWindow', {
    Id: 'saveDraftOrTemplateWindow',
    xtype: 'saveDraftOrTemplateWindow',

    width: 400,
    height: 180,
    bodyPadding: 0
});

问题在于，页面最初加载时似乎“调用”了 saveAsDraftRequest() 函数，导致 Javascript 错误“Uncaught TypeError: Cannot read property 'mask' of null”，并防止页面加载。我真的不明白为什么此时调用该函数，因为在实际单击按钮之前可能不应该调用处理程序。

我假设如果页面已经正确加载，那么 Ext.getBody() 将正确返回结果而不是 null，但是为什么在初始页面加载期间会调用它？

【问题讨论】：

标签： javascript extjs extjs4.1

【解决方案1】：

您正在调用saveAsDraftRequest 函数中的initComponent 行：

handler: saveAsDraftRequest(textFieldDraftOrTemplateName.getValue(), checkBoxSaveAsTemplate.getValue())

你应该把它改成

handler: saveAsDraftRequest

然后你需要在处理程序中解析 draftName 和 isTemplate。例如，您可以将它们分配给按钮：

handler: saveAsDraftRequest,
draftName: textFieldDraftOrTemplateName.getValue(),
isTemplate: checkBoxSaveAsTemplate.getValue()

然后您可以像这样在处理程序中访问它们：

function saveAsDraftRequest(sender) {
    console.log(sender.draftName);
    console.log(sender.isTemplate);
}

【讨论】：

谢谢 - 现在点击了为什么代码被那里调用。

【解决方案2】：

啊，@Lolo 给了我我需要的提示 - 我现在看到初始化代码正在调用函数来让处理程序使用 - 我可以做的是：

handler: function() {
    saveAsDraftRequest(textFieldDraftOrTemplateName.getValue(), checkBoxSaveAsTemplate.getValue());
},

...如果我想在那里调用它。

【讨论】：