How can i include two textboxes in Ext.Msg.show

Question

How can I modify the Ext.Msg.show in sencha to show two text boxes.Right now it supports only one textbox when we set prompt:true

Ext.Msg.show({
    title: 'Enter values',
    width: 500,
    buttons: Ext.Msg.OKCANCEL,
    multiline: true,
    prompt:true,
});

Answer 1

The easiest solution is just create a window. Like Evan said in the comment, the MessageBox is just an Ext.window.Window width a little extra..

a working fiddle

Here's a example definition:

Ext.define('MyApp.view.Login', {
    extend: 'Ext.window.Window',
    height: 220,
    width: 490,
    layout: 'fit',
    modal: true,
    buttonAlign: 'left',
    closable: false,
    items: [
        {
            xtype: 'form',
            frame: false,
            border: 0,
            layout: {
                type: 'hbox',
                align: 'middle'
            },
            fieldDefaults: {
                msgTarget: 'side',
                labelWidth: 55
            },
            items: [
                {
                    xtype: 'container',
                    flex: 1,
                    padding: 10,
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    items: [
                        {
                            xtype: 'textfield',
                            name: 'username',
                            fieldLabel: 'Username',
                            allowBlank: false,
                            flex: 1
                        },
                        {
                            xtype: 'textfield',
                            name: 'password',
                            fieldLabel: 'Password',
                            inputType: 'password',
                            allowBlank: false,
                            flex: 1
                        }
                    ]
                }
            ]
        }
    ],
    buttons: [
        {
            text: 'Login',
            handler: function () {
                Ext.Msg.alert('This is not yet implemented.').show();
            }
        }
    ]
});

Then you can just create and show the window:

Ext.create('MyApp.view.Login').show();

Answer 2

The msg property of the Ext.MessageBox will render as HTML, so you can tell it to show two HTML inputs and then use the values from these using something like

Ext.Msg.show(
{
    title: 'Enter values:',
    width: 500,
    buttons: Ext.Msg.OKCANCEL,
    msg: 'Value1: <input type="text" id="textInput1" /><br />Value 2: <input type="text" id="textInput2" />',
    fn: function (button)
    {
        var value1 = document.getElementById('textInput1').value;
        var value2 = document.getElementById('textInput2').value;
    }
});

Although, depending on what you're trying to do, using a window as suggested may be a better solution