javascript - 由于 Ext.getBody() 尚未定义，初始页面加载时出现 ExtJS 错误

Question

我正在尝试在 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，但为什么在初始页面加载期间调用此函数？

Answer 1

您正在调用 initComponent 中的 saveAsDraftRequest 函数:

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);
}