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

Posted 2023-02-26

【中文标题】如何在 Ext.Msg.show 中包含两个文本框

【英文标题】：How can i include two textboxes in Ext.Msg.show

【发布时间】：2013-08-14 10:37:51

【问题描述】：

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

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

【参考方案1】：

最简单的解决方案就是创建一个窗口。就像 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，消息框只是一个带有一些自定义项的Ext.window.Window。

这是首选方式。

很好的答案。要在单击按钮时关闭窗口，请在按钮处理程序中使用 this.up('window').close();。

如何获取按钮处理程序中的输入值？

【参考方案2】：

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

不过，根据您的尝试，使用建议的窗口可能是更好的解决方案

【讨论】：

像这样通过 id 获取元素并不是很灵活。因为您的页面上只能有 1 个这样的消息框。 Id 在页面上应该是唯一的。

@dkwarr87：感谢您的解决方案。这是一个快速修复，帮助我获得了两个文本框

@VDP ：虽然我还没有实现它，但也感谢您的回答:)