CODEWITHSUNDEEP
extjssencha-touch
Rohan More
Rohan More

Reputation: 131

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

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,
});

Upvotes: 6

Views: 9387

Answers (2)

dkwarr87
dkwarr87

Reputation: 204

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

Upvotes: 4

VDP
VDP

Reputation: 6420

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();

Upvotes: 7

Related Questions