ExtJs (v 6.0.0, classic) Message box with custom text and forms

Question

I want to have a workflow in ExtJs where I display a modal dialog in which someone needs to enter some data into a form and then presses the 'OK' to move on.

As far as I have seen the basic Ext.MessageBox could be a good fit in the first place.

But the documentation just describes a 'message' property. This one seems to be very restricted to me.

What I need is a custom form to be displayed as main body. A custom form with three toggle buttons and a textarea.
Not some prefigured single and simple textfields or textareas.

How can that be done? - Is the Ext.MessageBox not the right item to use?

Building a modal window does not feel correct as well since there are a lot of configurations which need to be done on top.

Did I miss something? Is the problem understandable?

What I have so far:

Ext.Msg.show({

        title:'Title',
        message: 'Here we should see another form with 3 togglable buttons and a textarea...',

        buttons: Ext.Msg.OK,
        icon: Ext.Msg.QUESTION,

        fn: function(btn) {
            console.log('button: '+ btn)
            if ( btn !== 'ok' ) { return; }
        },
    });

And this is somewhat what it should look like...

Of course it would be nice to react on the user's input after OK is pressed. Any hints are welcome as well.

Answer 1

I added showDialog function to window class by overriding it.

You can call showDialog by passing parentWindow and only parentWindow will be masked

showDialog: function(parentWindow) {
    var me = this;

    me.parentWindow = parentWindow;
    parentWindow.disableByMask();

    parentWindow.on({
        show: me.onParentShown,
        destroy: me.onParentDestroyed,
        hide: me.onParentHid,
        maskclick: me.onParentMaskClicked,
        scope: me
    });

    me.show();
},

disableByMask: function() {
    var me = this;

    me.setLoading("");
    me.loadMask.msgWrapEl.hide();

    var el = me.loadMask.getEl();
    el.setStyle({ opacity: 0 });

    el.on({
        mousedown: function () {                
            el.setStyle({ backgroundColor: "#CCCCCC", opacity: .5 });                
            me.fireEvent("maskclick", me, el);
        },
        mouseup: function () {
            el.setStyle({ backgroundColor: "#FFF", opacity: 0 });
        }
    });
},

hideDisabledMask: function() {
    var me = this,
        el = me.loadMask.getEl();

    me.setLoading(false);
    el.setStyle({ backgroundColor: "rgba(204, 204, 204, .5)", opacity: 1   });

    me.loadMask.msgWrapEl.show();
    me.loadMask.msgEl.show();
    me.loadMask.msgTextEl.show();
},

onParentShown: function() {
    var me = this;
    me.show();
},

onParentDestroyed: function() {
    var me = this;
    me.close();
},

onParentHid: function() {
    var me = this;
    me.hide();
},

onParentMaskClicked: function() {
    var me = this;
    me.zIndexManager.bringToFront(me);
},

onDestroy: function() {
    var me = this;

    if (me.parentWindow) {
        me.parentWindow.hideDisabledMask();
        me.parentWindow.un("show", me.onParentShowed, me);
        me.parentWindow.un("destroy", me.onParentDestroyed, me);
        me.parentWindow.un("hide", me.onParentHid, me);
        me.parentWindow.un("maskclick", me.onParentMaskClicked, me);
    }

    me.callParent();
}

Answer 2

Instead of using Ext.MessageBox, you have to create a customized pop up window with 3 buttons and a text area as items and a tbar button with text OK . For that button you have to use handler for your necessary actions ie.,

tbar =[
    {
        text: 'Ok',
        handler: function() {
            var textAreaValue = Ext.getCmp('text-area-id').getValue();
        }
    }
];