[英]How to display a Ext.FormPanel in a popup in Ext JS?
我可以像這樣在 Ext JS 中創建一個“確認框”:
使用此代碼:
...
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
});
},
...
我怎樣才能創建一個像這樣的帶有變暗背景的彈出窗口,但它不是一個 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'
}]
});
您可以使用窗口來完成,因為 MessageBox 沒有任何配置來添加面板。
要顯示掩碼,只需將配置選項模式設置為 true。
win = new Ext.Window(
{
layout: 'fit',
width: 500,
height: 300,
modal: true,
closeAction: 'hide',
items: new Ext.Panel(
{
items: //Your items here
})
});
我找到了一種非常簡單的方法來擴展/破解 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);
}
});
創建您自己的自定義 Window 也是完全有效的,但是......讓它看起來和行為與 MessageBox 完全相同是一個非常重要的麻煩。 此方法以最少的努力保持相同的外觀和感覺。
這有一個缺點,即使用不屬於公共 API 的屬性 (promptContainer) 有點像 hack。 所以這可能會被 Sencha 隨時更改。 但是,與讓您的自定義 Window 看起來和行為完全像 MessageBox 的替代方案相比(Sencha 將來也可以更改其外觀和行為),或者為您的每個對話框滾動您自己的 Windows 系統。應用程序,我不介意。
這很容易!
var msgbox = Ext.create('Ext.window.MessageBox',{});
var component = this.myReferences().comp;
msgbox.add(component);
msgbox.show();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.