How to display a Ext.FormPanel in a popup in Ext JS?

Question

I can create a "confirm box" in Ext JS like this:

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?

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'
            }]
    });

Answer 1

it's very easy !

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

Answer 2

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.

/**
 * 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.

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.

Answer 3

You can do it using a window because MessageBox doesn't have any configuration to add a panel.

And to display the mask just set the config option modal to true.

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