How add in Ext.LoadMask Ext.Button?

Question

Only work like:

     mask_grid_navi_via_points = new Ext.LoadMask(grid_navi_via_points.getEl(), {msg: 'Text...<button>Cancel</button>'});

I want insert Ext.Button and if like:

     var btn = new Ext.Button({
        renderTo: id,
        text: 'Cancel',
        handler: function(){
                    mask_grid_navi_via_points.hide();
        }
     });
     mask_grid_navi_via_points = new Ext.LoadMask(grid_navi_via_points.getEl(), {msg: 'Text...'+btn});

return [object Object]?

Answer 1

This is not so easy, since LoadMask is not a container, which would have items property. You could try

var loadMask = Ext.create('Ext.LoadMask',{
    msg:'Text'
});
loadMask.on('show',function(mask) {
    Ext.create('Ext.button.Button',{
        text: 'Cancel',
        handler: function(){
            loadMask.hide();
        },
        renderTo:loadMask.getEl()
    }
});
loadMask.show();

Answer 2

In Ext 4, I was able to get the following to work:

targetComponent.setLoading({
    msg: msg,
    listeners: {
        afterrender: function(component) {
            var el = component.el.createChild({tag: 'div', style: 'background-image: none; padding: 2px; border: 0; margin: auto; text-align: center;' });
            Ext.create('Ext.button.Button', {
                renderTo: el,
                html: 'Cancel',
                handler: function(button) {
                    // do something
                }
            });
        }
    }
});

The extra div was just to get the button to show up nice under the message.

Unfortunately, this didn't work in Ext 5. Everything I tried made the button a child of the targetComponent instead of the LoadMask.

After fiddling, I went with a different approach for Ext 5:

targetComponent.mask(msg);  
var maskMsgDiv = targetComponent.getEl().down('.x-mask-msg');
var buttonDiv = maskMsgDiv.appendChild({tag: 'div', style: 'background-image: none; padding: 2px; border: 0; margin: auto; text-align: center;' });

Ext.create('Ext.button.Button', {
    renderTo: buttonDiv,
    html: 'Cancel',
    handler: function(button) {
        // do something
    }
});

To hide the mask, call targetComponent.unmask().

I really don't like the use of down() here. Seems fragile and might be yet another chance for Sencha to break me...