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: 'pany',
                value: 'The Ordering Company Inc.'
            },{
                fieldLabel: 'Last Name',
                name: 'lastName',
                value: 'Smith'
            }]
    });

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: 'pany',
                value: 'The Ordering Company Inc.'
            },{
                fieldLabel: 'Last Name',
                name: 'lastName',
                value: 'Smith'
            }]
    });

• javascript
• extjs
• popup

3 Answers 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
        })
    });

I found a pretty simple way to extend/hack the MessageBox class to allow you to pass in custom ponents that will be displayed in the body.

/**
 * Simple hack of MessageBox to allow the user to pass in some custom ponents (such as a form) that will be added to
 * the body of the MessageBox.
 * 
 * Keep in mind:
 * 
 * - You must create each ponent 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 ponents
 * - 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 ponents 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 pared 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.

it's very easy !

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