Question

在Ext.MessageBox中是否有一种Ext-approction方式突出显示默认按钮（按Enter键触发的按钮）？

请注意，我不希望在显示MessageBox时关注按钮（如果是“提示”对话框，我希望输入元素具有焦点）。

我知道我可以通过在按钮元素中添加一个自定义类来实现这一点但是...也许有更好的，更像Ext的方式来做这个？

感谢。

Answer 1

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

Ext.MessageBox.defaultButton = buttonIndex;

其中'buttonIndex'是对话框上按钮的索引。在调用Ext.MessageBox.Show。

之前，您需要执行此操作

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>标记一样添加类，以便更轻松..

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

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

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
    }
  ]
  ,...

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

3 个答案: