Extjs 如何添加Ext.LoadMask Ext.按钮？

只能像这样工作：

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

---

返回[object object]？

这并不容易，因为LoadMask不是一个容器，它将具有items属性。你可以试试

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

---

在Ext 4中，我能够实现以下功能：

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

额外的div只是为了让按钮在消息下显示得更好

不幸的是，这在Ext5中不起作用。我尝试过的每件事都使按钮成为targetComponent的子项，而不是LoadMask

在摆弄之后，我对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
    }
});

要隐藏掩码，请调用targetComponent.unmask

---

我真的不喜欢在这里使用。看起来很脆弱，可能是Sencha打破我的又一次机会…

未定义不是一个函数

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