覆盖消息框并将图标添加到默认按钮
override messagebox and add icons to the default buttons
这里有人知道如何覆盖消息框以放置按钮图标吗?即:检查 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]
});
}
});
从源码可以看出,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);
如果您要通过创建 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.Msg
和 Ext.MessageBox
是 Ext.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]
这里有人知道如何覆盖消息框以放置按钮图标吗?即:检查 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]
});
}
});
从源码可以看出,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);
如果您要通过创建 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.Msg
和 Ext.MessageBox
是 Ext.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]