如何修改sencha中的Ext.Msg.show以显示两个文本框。现在,当我们设置提示时,它只支持一个文本框:true
Ext.Msg.show({
title: 'Enter values',
width: 500,
buttons: Ext.Msg.OKCANCEL,
multiline: true,
prompt:true,
});
答案 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;
}
});
虽然,根据您的尝试,使用建议的窗口可能是更好的解决方案