Question

有谁知道如何覆盖消息框以为按钮添加图标？即：检查是/否的图标，否则为交叉按钮等

我试图覆盖npm install的{{1}}函数，但它似乎不起作用，甚至没有点击makeButton：

Ext.window.MessageBox

Answer 1

从源代码中可以看出，makeButton方法是从Ext.window.MessageBox的{{3}}调用的。

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

所以你可以直接覆盖单例实例的按钮，如下所示：

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

Answer 2

正如@ scebotari66所述，Ext.Msg和Ext.MessageBox是Ext.window.MessageBox的单身人士。因此，当您覆盖Ext.window.MessageBox.makeButton时，如果您在此类中使用单例，则无效。

但是，有一种方法可以将您的替换应用于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]

的顺序

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

2 个答案: