ExtJS 4.1：MessageBox 4 按钮答案

【问题标题】：ExtJS 4.1: MessageBox 4 buttonsExtJS 4.1：MessageBox 4 按钮
【发布时间】：2014-08-25 10:59:47
【问题描述】：

我试图为可关闭的MessageBox 设置 4 个按钮，并意识到 close(x) 按钮正在调用我的第四个按钮的自定义功能，而不是关闭对话框。

这是我的按钮配置：

{
  ok      : 'Action1',
  yes     : 'Action2',
  no      : 'Action3', 
  cancel  : 'Action4'
}

处理程序代码：

fn : function(buttonId, text, option) {
switch (buttonId)
    {
        case 'ok' :
            action1();
            break ;
        case 'yes' :
            action2();
            break ;
        case 'no' :
            action3();
            break ;
        case 'cancel' :
            action4();
            break ;                                         
    }
}

有什么帮助吗？

【问题讨论】：

您需要更多代码。触发函数的选择器是什么？
为什么需要YES和OK？如果您真的不需要它们，请使用：docs-origin.sencha.com/ext/5.0.0/apidocs/#!/api/…
@Saki，通过使用YESNOCANCEL，我只得到了 3 个按钮，但我需要 4 个按钮
@C.Parcell，用处理程序代码更新了原始问题。
默认情况下 ExtJS 使用 3 个按钮，如果您需要更多创建带有 4 个按钮和消息的新窗口。我会用图片给你答案。

标签： extjs4

【解决方案1】：

这是解决问题的方法。我创建了带有 4 个按钮的新窗口作为默认 YESNOCANCEL 窗口。

这是窗口的代码：

Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',

requires: [
    'Ext.container.Container',
    'Ext.Img',
    'Ext.form.Label',
    'Ext.button.Button'
],

autoShow: true,
border: false,
height: 165,
width: 329,
title: 'Save Changes?',

layout: {
    type: 'vbox',
    align: 'stretch'
},

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        items: [
            {
                xtype: 'container',
                flex: 3,
                margin: 5,
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [
                    {
                        xtype: 'image',
                        flex: 1,
                        height: 86,
                        padding: 15,
                        width: 113,
                        src: 'icon-question.png'
                    },
                    {
                        xtype: 'label',
                        flex: 3,
                        padding: '15 10 5 10',
                        text: 'You are closing a tab that has unsaved changes. Would you like to save your changes?'
                    }
                ]
            },
            {
                xtype: 'container',
                flex: 2,
                padding: '10 5 10 5',
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [
                    {
                        xtype: 'button',
                        flex: 1,
                        margin: '0 5 0 0',
                        text: 'Yes'
                    },
                    {
                        xtype: 'button',
                        flex: 1,
                        margin: '0 5 0 0',
                        text: 'No'
                    },
                    {
                        xtype: 'button',
                        flex: 1,
                        margin: '0 5 0 0',
                        text: 'New Button'
                    },
                    {
                        xtype: 'button',
                        flex: 1,
                        text: 'Cancel'
                    }
                ]
            }
        ]
    });

    me.callParent(arguments);
}

});

【讨论】：