Question

只能像：

一样工作

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

我想插入Ext.Button，如果喜欢：

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

返回[object Object]？

Answer 1

这不是那么容易，因为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();

Answer 2

在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只是让按钮在消息下显示得很好。

不幸的是，这在Ext 5中不起作用。我试过的所有内容都使按钮成为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()。

我真的不喜欢在这里使用down（）。看起来很脆弱，可能是Sencha打破我的另一个机会......

如何添加Ext.LoadMask Ext.Button？

2 个答案: