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

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