Question

我希望在ExtJs中有一个工作流程，我在其中显示一个模态对话框，其中有人需要将某些数据输入到表单中，然后按下“确定”。继续前进。

据我所知，基本的Ext.MessageBox可能是最适合的。

但文档只描述了一条消息＆＃39;属性。这个似乎非常局限于我。

我需要的是一个自定义表单作为主体显示。带有三个切换按钮和一个文本区域的自定义表单不是一些预先设定的单个和简单的文本字段或textareas。

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

您必须创建一个自定义弹出窗口，其中包含3个按钮，文本区域为项目，而 tbar 按钮的文本为强大，而不是使用Ext.MessageBox >确定。对于该按钮，您必须使用处理程序进行必要的操作，即..，

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

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

2 个答案: