带有自定义按钮的 ExtJs 消息框

Posted 2023-02-26

【中文标题】带有自定义按钮的 ExtJs 消息框

【英文标题】：ExtJs Message box with Custom buttons

【发布时间】：2011-06-07 05:39:37

【问题描述】：

如何使用自定义按钮显示 ExtJS 消息框。

我想要一个带有自定义消息和“取消”和“停用”按钮的消息框。 请给点意见。

buttons: [
    text: "Cancel",
    handler: function () 
        Ext.MessageBox.hide();
        //submitTicketForm();
    
,
    text: "Deactivate",
    handler: function () 
        Ext.MessageBox.hide();
    
],

我正在这样使用它，但没有得到任何按钮。

【参考方案1】：

在 ExtJS 4 中，您可以像这样制作自己的组件：

Ext.define('App.view.MyDialog', 
    /**
     * Shows the dialog.
     */
    show: function() 
        var dialog = Ext.create('Ext.window.MessageBox', 
            buttons: [
                text: 'baz',
                iconCls: 'icon-add',
                handler: function() 
                    dialog.close();
                
            ]
        );

        dialog.show(
            title: 'foo!',
            msg: '<p>bar?</p>',
            icon: Ext.MessageBox.WARNING
        );

        dialog.setHeight(160);
        dialog.setWidth(420);
    
);

然后：

var dialog = Ext.create('App.view.MyDialog');
dialog.show();

【讨论】：

您定义一个类并在其中创建一个组件。为什么不直接扩展 Messagebox？

【参考方案2】：

MessageBox 是内部管理的 Window 的单个实例，用于提示、显示、警报等。

您可以通过传入一个字符串来更改按钮文本，如下所示：

buttons: ok: "Foo", cancel: "Bar"

参考： MessageBox

buttons:  
                ok: "Foo", 
                handler: function() 
                    Ext.MessageBox.hide(); 

                ,
                cancel: "Bar",
                handler: function()
                    Ext.MessageBox.hide();
                
        

【讨论】：

感谢您的重播..它工作正常，但是如何添加处理程序，当我试图为一个按钮添加处理程序时，按钮没有得到........谢谢跨度>

添加这个：fn : function(btn) console.log('btn'+btn);

我认为重要的是要注意buttons 属性仅在您创建新消息框时可用。如果您使用的是Ext.Msg.show(config)，则没有button 属性！

【参考方案3】：

使用“buttonText”而不是“button”，

buttonText: ok: 'Deactivate', cancel: 'Cancel',
fn: function(btn) 
    if (btn === 'ok') 
        Ext.MessageBox.hide();
      else 
        Ext.MessageBox.hide(); 
     

【参考方案4】：

在 ExtJS 4 和 ExtJS 5 中，要为按钮设置自定义文本，您需要同时使用 buttons 和 buttonText 配置：

buttons: [
    Ext.Msg.OK
],
buttonText:  
    ok: "Custom text"
,
fn: function()  
    // ...handle OK button