如何在Ext.Msg.show中包含两个文本框

时间:2013-08-14 10:37:51

标签: extjs sencha-touch

如何修改sencha中的Ext.Msg.show以显示两个文本框。现在,当我们设置提示时,它只支持一个文本框:true

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

2 个答案:

答案 0 :(得分:7)

最简单的解决方案就是创建一个窗口。就像Evan在评论中所说的那样,MessageBox的宽度只有Ext.window.Window一点......

工作fiddle

以下是一个示例定义:

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

然后你可以创建并显示窗口:

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

答案 1 :(得分:4)

Ext.MessageBox的msg属性将呈现为HTML,因此您可以告诉它显示两个HTML输入,然后使用

之类的值来使用这些值。
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;
    }
});

虽然,根据您的尝试,使用建议的窗口可能是更好的解决方案