メッセージボックスをオーバーライドし、デフォルトのボタンにアイコンを追加します

Question

ボタンのアイコンを入れるためにメッセージボックスを無効にする方法は誰にも分かりますか？すなわち：YES/OK、十字ボタンNOのため、などのアイコンをチェックし

私は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.Msg.alert()呼び出す

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(); 

次回は、あなたのアイコンは現在、あまりにも見せています。

この情報が役立ちますようにお願いいたします。

注：iconCls設定が順番に[ok, yes, no, cancel]

Answer 2

あなたがソースコードから見ることができるように、makeButton方法はExt.window.MessageBoxのinitComponentから呼び出されます。

メッセージボックスを表示するために、Ext.MessageBox（またはExt.Msg）シングルトンインスタンスを使用していることを前提としています。このインスタンスは、Ext.window.MessageBoxが作成された直後にコールバック関数で作成されます（3番目の引数を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' 
});