ExtJs (v 6.0.0, classic) Окно сообщения с пользовательским текстом и формами

Question

Я хочу иметь рабочий процесс в ExtJs, где я отображаю модальное диалоговое окно, в котором кто-то должен ввести некоторые данные в форму, а затем нажать «ОК» для продолжения.

Насколько я видел, базовый Ext.MessageBox мог бы подойти в первую очередь.

Но в документации просто описывается свойство 'message'. Этот, кажется, очень ограничен для меня.

Что мне нужно, так это пользовательская форма, которая будет отображаться в виде основного текста. Пользовательская форма с тремя кнопками переключения и текстовой областью.
Не некоторые предварительно настроенные одиночные и простые текстовые поля или текстовые области.

Как это можно сделать? - Не подходит ли Ext.MessageBox для использования?

Построение модального окна также не кажется правильным, поскольку существует множество конфигураций, которые необходимо выполнить поверх.

Я что-то пропустил? Проблема понятна?

Что у меня так далеко:

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; }
        },
    });

И вот как это должно выглядеть ...

Конечно, было бы неплохо реагировать на ввод пользователя после нажатия OK. Любые советы приветствуются.

Answer 1

Вместо использования Ext.MessageBox необходимо создать настраиваемое всплывающее окно с 3 кнопками и текстовой областью в виде элементов и кнопки tbar с текстом OK . Для этой кнопки вы должны использовать обработчик для ваших необходимых действий, т. Е.,

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

Answer 2

Я добавил функцию showDialog в класс окна, переопределив ее.

Вы можете вызвать showDialog, передавая parentWindow, и только parentWindow будет замаскирован

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();
}