覆盖消息框并将图标添加到默认按钮

override messagebox and add icons to the default buttons

这里有人知道如何覆盖消息框以放置按钮图标吗?即:检查 YES/OK 的图标,否的十字按钮等

我试图覆盖 Ext.window.MessageBoxmakeButton 功能,但它似乎不起作用,甚至没有达到 debugger:

Ext.override(Ext.window.MessageBox, {
    makeButton: function (btnIdx) {
        debugger;
        var btnId = this.buttonIds[btnIdx];
        return new Ext.button.Button({
            handler: this.btnCallback,
            itemId: btnId,
            scope: this,
            text: this.buttonText[btnId],
            minWidth: 75,
            iconCls: ['check', 'no', 'cancel', 'blah'][btnId]
        });
    }
});

从源码可以看出,makeButton方法是从Ext.window.MessageBoxinitComponent调用的。

我假设您正在使用 Ext.MessageBox(或 Ext.Msg)单例实例来显示消息框。此实例是在创建 Ext.window.MessageBox 后立即在回调函数中创建的(检查 Ext.define 中的第三个参数)。这也意味着它发生在您的覆盖之前。

所以你可以像这样直接覆盖单例实例的按钮:

Ext.Msg.msgButtons.ok.setIconCls(okBtnCls);
Ext.Msg.msgButtons.yes.setIconCls(yesBtnCls);
Ext.Msg.msgButtons.no.setIconCls(noBtnCls);
Ext.Msg.msgButtons.cancel.setIconCls(cancelBtnCls);

如果您要通过创建 class:

的新实例来显示消息框,您也可以依靠 makeButton 覆盖
var myMsg = Ext.create('Ext.window.MessageBox', {
    closeAction: 'destroy'
}).show({
    title: 'Custom MessageBox Instance',
    message: 'I can exist along with Ext.Msg'
});

正如@scebotari66 所说,Ext.MsgExt.MessageBoxExt.window.MessageBox 的单例。因此,当您覆盖 Ext.window.MessageBox.makeButton 时,如果您为此 class.

使用单例,则这将无效

但是,有一种方法可以将您对 Ext.window.MessageBox 的覆盖应用于单例。你猜怎么着。

(鼓声)

tantantanan!

Ext.MessageBox = Ext.Msg = new Ext.window.MessageBox();

是的,没错。您只需要在覆盖后重新分配单例即可。

所以:

Ext.override(Ext.window.MessageBox, {
    makeButton: function (btnIdx) {
        var btnId = this.buttonIds[btnIdx];
        return new Ext.button.Button({
            handler: this.btnCallback,
            itemId: btnId,
            scope: this,
            text: this.buttonText[btnId],
            iconCls: ['okbutton', 'yesbutton', 'closebutton', 'cancelbutton'][btnIdx],
            minWidth: 75 //or you can also remove this to make the icons close to the label
        });
    }
});
//re-assign singleton to apply overrides
Ext.MessageBox = Ext.Msg = new Ext.window.MessageBox();

下次您调用 Ext.Msg.alert() 时,您的图标现在也会显示。

希望对您有所帮助。

注意: iconCls 配置的顺序应该是 [ok, yes, no, cancel]