javascript 如何在 Ext JS 的弹出窗口中显示 Ext.FormPanel？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5298024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display a Ext.FormPanel in a popup in Ext JS?
提问by Edward Tanguay
I can create a "confirm box" in Ext JS like this:
我可以像这样在 Ext JS 中创建一个“确认框”：
with this code:
使用此代码：
...
listeners: {
'afterrender' : function(p) {
p.header.on('click', function(e, h) {
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to EDIT this?', function(btn) {
var button_answer = new Ext.Panel({
title: 'Invoice Address',
width: 290,
height: 200,
html: 'you clicked the ' + btn + ' button for EDIT',
frame: true,
border: true,
header: true
});
replaceComponentContent(small_box_upper_left, button_answer, true);
});
}, p, {
delegate: '.panel_header_icon2',
stopEvent: true
});
},
...
How can I create a pop-up-with-dimmed-background like this but instead of a MessageBox it has a Ext.FormPanel in it?, e.g. how can I put this code inside a popup with dimmed background?
我怎样才能创建一个像这样的带有变暗背景的弹出窗口，但它不是一个 MessageBox，而是一个 Ext.FormPanel？，例如我怎样才能把这个代码放在一个背景变暗的弹出窗口中？
new Ext.FormPanel({
frame:true,
labelWidth: 90,
labelAlign: 'right',
title: 'Orderer Information',
bodyStyle:'padding:5px 5px 0',
width: 300,
height: 600,
autoScroll: true,
itemCls: 'form_row',
defaultType: 'displayfield',
items: [{
fieldLabel: 'Customer Type',
name: 'customerType',
allowBlank:false,
value: 'Company'
},{
fieldLabel: 'Company',
name: 'company',
value: 'The Ordering Company Inc.'
},{
fieldLabel: 'Last Name',
name: 'lastName',
value: 'Smith'
}]
});
回答by brittongr
You can do it using a window because MessageBox doesn't have any configuration to add a panel.
您可以使用窗口来完成，因为 MessageBox 没有任何配置来添加面板。
And to display the mask just set the config option modal to true.
要显示掩码，只需将配置选项模式设置为 true。
win = new Ext.Window(
{
layout: 'fit',
width: 500,
height: 300,
modal: true,
closeAction: 'hide',
items: new Ext.Panel(
{
items: //Your items here
})
});
回答by Josh
I found a pretty simple way to extend/hack the MessageBox class to allow you to pass in custom components that will be displayed in the body.
我找到了一种非常简单的方法来扩展/破解 MessageBox 类，以允许您传入将在正文中显示的自定义组件。
/**
* Simple hack of MessageBox to allow the user to pass in some custom components (such as a form) that will be added to
* the body of the MessageBox.
*
* Keep in mind:
*
* - You must create each component using Ext.create() before passing it in, rather than using an xtype
* - MessageBox uses an Anchor layout for its body, so use Anchor layout syntax with your components
* - Use bodyStyle: {background: 'none'} to get rid of a clashing background issue
*/
Ext.define('My.CustomMessageBox', {
extend: 'Ext.window.MessageBox',
/**
* @cfg customItems An array of user-created components to add to the body of the MessageBox
*/
customItems: [],
initComponent: function() {
var me = this;
me.callParent();
me.promptContainer.add(me.customItems);
}
});
Creating your own custom Window is perfectly valid as well, but... it's a pretty significant hassle to get it to look and behave exactly the same as a MessageBox. This method keeps the same look and feel with minimal effort.
创建您自己的自定义 Window 也是完全有效的，但是......让它看起来和行为与 MessageBox 完全相同是一个非常重要的麻烦。此方法以最少的努力保持相同的外观和感觉。
This has the disadvantage of being a bit of a hack that uses a property (promptContainer) that isn't part of the public API. So that is subject to change at any time by Sencha. However compared to the alternative of either getting your custom Window to look and behave exactly like a MessageBox (the look and behavior of which could also be changed by Sencha in the future), or rolling your own system of Windows for every single dialog in your app, I don't mind it.
这有一个缺点，即使用不属于公共 API 的属性 (promptContainer) 有点像 hack。所以这可能会被 Sencha 随时更改。但是，与让您的自定义 Window 看起来和行为完全像 MessageBox 的替代方案相比（Sencha 将来也可以更改其外观和行为），或者为您的每个对话框滚动您自己的 Windows 系统应用程序，我不介意。
