extjs 如何在Ext JS中以弹出窗口显示Ext.FormPanel？

s4n0splo 于 2022-11-05 发布在其他

关注(0)|答案(3)|浏览(313)

我可以在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'
            }]
    });

extjs

来源：https://stackoverflow.com/questions/5298024/how-to-display-a-ext-formpanel-in-a-popup-in-ext-js

3条答案

按热度按时间

w9apscun1#

您可以使用窗口来完成此操作，因为MessageBox没有任何配置来添加面板。
要显示掩码，只需将配置选项modal设置为true。

win = new Ext.Window(
    {
        layout: 'fit',
        width: 500,
        height: 300,
        modal: true,
        closeAction: 'hide',
        items: new Ext.Panel(
        {
           items: //Your items here
        })
    });

赞(0）回复(0）举报 2022-11-05

qfe3c7zg2#

我发现了一个非常简单的方法来扩展/修改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);
    }
});

创建自己的自定义窗口也是完全有效的，但是......要使它的外观和行为与MessageBox完全相同是一件相当麻烦的事情。此方法可以用最少的工作量保持相同的外观和感觉。
这样做的缺点是有点像使用属性的黑客（promptContainer），它不是公共API的一部分。因此， Sencha 可以随时更改它。但是，与让自定义窗口的外观和行为与MessageBox完全相同的替代方案相比，（它的外观和行为也可能在未来被 Sencha 改变），或者为你的应用程序中的每一个对话框滚动你自己的Windows系统，我不介意。

赞(0）回复(0）举报 2022-11-05

zed5wv103#

这很简单！

var msgbox = Ext.create('Ext.window.MessageBox',{});
var component = this.myReferences().comp;
msgbox.add(component);
msgbox.show();

赞(0）回复(0）举报 2022-11-05

我来回答

extjs 如何在Ext JS中以弹出窗口显示Ext.FormPanel？

3条答案

相关问题

热门标签

最新问答