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

Question

有没有人知道这里如何覆盖消息框来放置按钮的图标？即：为NO，YES/OK，十字按键等检查图标

我试图重写的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] 
     }); 
    } 
}); 

Answer 1

正如@ 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]

Answer 2

正如您从源代码中看到的，makeButton方法从initComponent的Ext.window.MessageBox调用。

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