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 i found out that i could set the title using a config object for the Ext.panel.Title 组件。

但是设置配置 object 就像下面的例子一样使标题不可见。

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

我还检查了 Chrome 开发人员工具的元素选项卡中的视图，我看到 x-paneltitle class 中有一个用于图标的 div 元素。

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

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

Answer 1

你掉进了文档陷阱。

标题配置在 Ext.Panel class 实例化中可用，因此，从技术上讲，在 Ext.MessageBox 实例化中也可用，但在其 show 方法中不可用，这您调用 Sencha 为您 pre-instantiated 的单例。

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

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，但它应该仍然有效。

Ext.MessageBox 带有超赞字体图标的标题

Ext.MessageBox title with font awesome icon

javascript

extjs

extjs6

extjs6-modern