ExtJS（3.x）のデフォルトのハイライトボタンMessageBox

Question

Ext.MessageBoxのデフォルトボタン（Enterキーを押して起動するボタン）を強調表示する方法がありますか？

MessageBoxが表示されているときにボタンにフォーカスを当てることはしません（「プロンプト」ダイアログの場合は、入力要素にフォーカスが欲しい）。

私は、ボタンクラスにカスタムクラスを追加することでこれを行うことができますが...多分、これを行うためのExtと同様の方法がありますか？

ありがとうございました。

Answer 1

簡潔に言えば、 Extは現在、configオプションではなく、Ext.MessageBoxコンポーネントのいずれかのボタンをハイライト表示する方法を提供していません。

ただし、シナリオによっては方法があります。あなたは（あなたが実際にすべてのメッセージボックスに使用することができます）Ext.MessageBox.show()を使用している場合たとえば、あなたは私たちがやったすべてのものに<b>タグを追加で

new Ext.Msg.show({ 
    title: 'Test', 
    msg: 'A sample message box with a button marked as default', 
    buttons: { ok: '<b>Submit</b>', cancel: 'Cancel' }, 
    fn: function(btn) { 
     if(btn == 'ok') { 
      //do something 
     } 
    }, 
    icon: Ext.Msg.WARNING 
} 

...のような何かを行うことができますボタンをクリックすると、明らかに太字で表示されます。

あなたが言及したもう一つの方法は、カスタムクラスを追加してテキストの色でボタンをマークすることです。上記の<b>タグを使ったようにクラスを追加するだけで簡単にできます。

buttons: { ok: '<span class="highlighted-option">Submit</span>', cancel: 'Cancel' },

アプローチのこのスタイル以外

、またはExt.MessageBoxクラスを拡張せずに、これを達成するための他の方法はありません。

Answer 2

最高の答えがありますが、これは他の人にとっては有益な場合があります...ここではスタイルでそれを行う方法があります。 他のボタン（ウィンドウボタンなど）にも同じトリックを適用できます。

あなたのCSSにこれを追加します。

.x-btn-default td.x-btn-mc { 
    outline: 1px dotted black; 
} 

を次に、このようなボタンを定義します。ExtJSの4で

... 
    ,buttons: [ 
    { 
     text: 'Ok', 
     ,handler: handleFn 
     ,cls: 'x-btn-default' 
    },{ 
     text: 'Cancel', 
     ,handler: handleFn 
    } 
    ] 
    ,... 

Answer 3

次のようにデフォルトボタンを設定することができます。

Ext.MessageBox.defaultButton = buttonIndex; 

'buttonIndex'はダイアログ上のボタンのインデックスです。 Ext.MessageBox.Showを呼び出す前にこれを行う必要があります。