0

我试图在标题内设置一个 fontawesome 图标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
    });

阅读文档我发现我可以使用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>

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

4

2 回答 2

2

你在那里陷入了文档陷阱。

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

以下将在技术上使用自定义标题配置实例化一个消息框：

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

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

于 2017-12-14T15:18:39.623 回答
1

这对我有用：

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，但它仍然可以工作。

于 2017-12-14T15:22:35.177 回答