Ext.MessageBox 标题和字体真棒图标

Question

我试图在Ext.MessageBox 标题内设置一个字体很棒的图标，我设法使用下面的代码来完成它：

Ext.Msg.show({
        //iconCls: 'x-fa fa-times-circle',
        title: '<span class="x-fa fa-exclamation"> Error Title</span>',
        message: 'An error occured!!!!!',
        buttons: Ext.MessageBox.OK,
        width: 400
    });

阅读docs 我发现我可以使用Ext.panel.Title 组件的配置对象来设置标题。

但是像下面的例子那样设置配置对象会使标题不可见。

title: {
    text: 'Error Title',
    iconCls: 'x-fa fa-exclamation'
}

我还从 Chrome 的开发工具的 Elements 选项卡中检查了视图，发现x-paneltitle 类中有一个用于图标的 div 元素。

<div class="x-icon-el x-font-icon" id="ext-element-15"></div>

如何使用Ext.panel.Title 配置设置MessageBox 标题？

Answer 1

你掉进了文档陷阱。

标题配置在Ext.Panel 类实例化中可用，因此，从技术上讲，在Ext.MessageBox 实例化中也可用，但在其show 方法上不可用，您可以在已预先实例化的单例上调用该方法你由煎茶。

以下将技术上实例化具有自定义标题配置的消息框：

Ext.create('Ext.MessageBox',{
    title: {
        text: 'Error Title',
        iconCls: 'x-fa fa-exclamation'    
    }
});

然而，要显示Ext.MessageBox，您必须调用show 方法，该方法已被覆盖，以便覆盖您添加到标题配置的每个自定义设置。

Answer 2

这对我有用：

Ext.Msg.show({
  title: {
    text: 'Error Title',
    iconCls: 'x-fa fa-exclamation'
  },
  message: 'You are closing a tab that has unsaved changes. Would you 
  like to save your changes?',
  buttons: Ext.Msg.YESNOCANCEL,
  icon: Ext.Msg.QUESTION,
  fn: function(btn) {
    if (btn === 'yes') {
        console.log('Yes pressed');
    } else if (btn === 'no') {
        console.log('No pressed');
    } else {
        console.log('Cancel pressed');
    }
  }
});

在这里使用它： https://docs.sencha.com/extjs/6.0.2/classic/Ext.window.MessageBox.html

它是 Classic 6.0.2，但它应该仍然可以工作。