在ExtJS（3.x）的MessageBox中突出显示默认按钮

Question

是否有Ext认可的方法来突出显示默认按钮（通过按Enter触发的按钮）在Ext.MessageBox中？

请注意，我不想在MessageBox显示时将焦点放在按钮上（在“prompt”对话框的情况下，我希望输入元素具有焦点）。

我知道可以通过向按钮元素添加自定义类来实现这一点，但是...也许有更好的、更符合Ext风格的方法吗？

谢谢。

- Sergio

Answer 1

在ExtJs 4中，您可以按照以下方式设置默认按钮：

Ext.MessageBox.defaultButton = buttonIndex;

'buttonIndex' 是对话框中按钮的索引。在调用 Ext.MessageBox.Show 之前，您需要进行这个操作。

- Rohland

---

我记不清楚按钮是从基础索引0还是1开始，但它仅基于页脚栏中的按钮数量（从左边计数）。例如（假设从零开始索引），如果您在页脚栏中有“是”、“否”作为按钮，“是”将是第一个按钮（索引0），而“否”将是第二个按钮（索引1）。希望这可以帮助到您。 - Rohland

Answer 2

简而言之，不能。目前 Ext 并没有提供任何方法来在任何 Ext.MessageBox 组件中高亮显示按钮，至少不是通过配置选项。

不过，根据情况有其他的解决方法。例如，如果你正在使用 `Ext.MessageBox.show()`（你实际上可以将其用于所有消息框），那么你可以这样做...

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>标签，这会将其中一个按钮显示为粗体。

你提到的另一种方法是添加自定义类并将按钮标记为文本颜色，甚至可以像我们上面使用<b>标签那样只需添加类以使其更容易。

除了这种方法或者不扩展Ext.MessageBox类之外，没有其他方法可以实现这一点。

- JamesHalsall

Answer 3

Jaitsu的回答是最好的，但如果这对其他人有用的话...这是一种使用样式来实现的方法。同样的技巧也可以应用于任何其他按钮（如：窗口按钮）。

将以下内容添加到您的CSS中：

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

然后像这样定义按钮：

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

- Sergio