ExtJS error in initial page load due to Ext.getBody() not yet being defined

Question

I'm trying to create a dialog window in ExtJS to perform a save function, but I'm getting problems loading the page.

A (reduced) example of the code window definition is:

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

The problem is that is seems to be 'calling' the saveAsDraftRequest() function when the page initially loads which gives the Javascript error "Uncaught TypeError: Cannot read property 'mask' of null", and prevents the page loading. I don't really understand why the function is getting called at this point, as the handler presumably shouldn't be called until the button is actually clicked.

I assume that if the page were already correctly loaded then Ext.getBody() would correctly return a result instead of null, but why is this getting called during the initial page load?

Answer 1

You are invoking saveAsDraftRequest function in initComponent in line:

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

You should change it to

handler: saveAsDraftRequest

Then you need resolve draftName and isTemplate in handler. You can for example assign them to button:

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

Then you can access them in handler like so:

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

Answer 2

Ah, @Lolo has given me the hint I need - I see now that the initialisation code was invoking the function to get the handler to use - what I could have done is:

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

... if I wanted to invoke it there.