ExtJs（v 6.0.0，经典）带有自定义文本和表单的消息框

Question

我想在ExtJs中创建一个工作流，在其中显示一个模式对话框，在该对话框中，有人需要将一些数据输入表单，然后按“确定”继续。

据我所知，基本的Ext.MessageBox首先可能很合适。

但是文档仅描述了“消息”属性。 这似乎仅限于我。

我需要的是自定义表单，以显示为主体。 具有三个切换按钮和一个文本区域的自定义窗体。
没有一些预先准备好的单一和简单文本字段或文本区域。

那怎么办？ -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

我通过覆盖将showDialog函数添加到窗口类。

您可以通过传递parentWindow来调用showDialog，只有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();
}

Answer 2

代替使用Ext.MessageBox，您必须创建一个自定义弹出窗口，其中包含3个按钮和一个文本区域作为项，以及一个tbar按钮，其文本为OK 。 对于该按钮，您必须使用处理程序来执行必要的操作，即

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