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

【问题标题】：override messagebox and add icons to the default buttons覆盖消息框并将图标添加到默认按钮
【发布时间】：2017-08-31 12:59:03
【问题描述】：

这里有人知道如何覆盖消息框来放置按钮的图标吗？即：检查图标为是/确定，十字按钮为否等。

我试图覆盖Ext.window.MessageBox 的makeButton 函数，但它似乎不起作用，甚至没有命中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]
        });
    }
});

【问题讨论】：

标签： extjs extjs4 extjs4.2

【解决方案1】：

正如@scebotari66 所说，Ext.Msg 和Ext.MessageBox 是Ext.window.MessageBox 的单例。因此，当您覆盖 Ext.window.MessageBox.makeButton 时，如果您对此类使用单例，这将无效。

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

(鼓声)

坦坦坦南！

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]

【讨论】：

如果您没有回答，也无法看到它。 :) 你拥有 80% 的信用：D

【解决方案2】：

从源码可以看出，makeButton方法是从Ext.window.MessageBox的initComponent调用的。

我假设您正在使用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);

如果您将通过创建类的新实例来显示消息框，您也可以依赖您的 makeButton 覆盖：

var myMsg = Ext.create('Ext.window.MessageBox', {
    closeAction: 'destroy'
}).show({
    title: 'Custom MessageBox Instance',
    message: 'I can exist along with Ext.Msg'
});

【讨论】：

我认为 makeButton 覆盖会做..看我的回答