如何在 ExtJS 中单击按钮时打开模式答案

【问题标题】：How to open a modal on button click in ExtJS如何在 ExtJS 中单击按钮时打开模式
【发布时间】：2018-09-27 14:34:01
【问题描述】：

我第一次尝试下面的代码它工作正常，但是当我关闭弹出窗口并再次单击按钮时它停止工作。

 var myForm = new Ext.form.Panel({
        width: 500,
        height: 400,
        title: 'Foo',
        floating: true,
        closable : true
    });
    //myForm.show();

Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    listeners: {
        click: function() {
           myForm.show();
        }
    }
});

【问题讨论】：

标签： javascript extjs extjs6

【解决方案1】：

因为默认情况下closeAction 等于'destroy'，这意味着组件将在单击关闭按钮时被销毁。在您销毁您的 myForm 对象后，它在第二次尝试时将不可用。

解决方案：
1）您可以将closeAction更改为“隐藏”，单击关闭按钮后组件将隐藏在dom中。

var myForm = new Ext.form.Panel({
    width: 500,
    height: 400,
    title: 'Foo',
    floating: true,
    closable: true,
    closeAction: 'hide'//<-------------
});

2) 您可以在每次点击按钮时创建新对象。

Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    listeners: {
        click: function () {
            new Ext.form.Panel({
                width: 500,
                height: 400,
                title: 'Foo',
                floating: true,
                closable: true
            }).show();
        }
    }
});

【讨论】：

【解决方案2】：

您可以将以下内容添加到您的面板中。关闭后会隐藏它

            closeAction: 'hide'

如果你正在构建一个大屏幕，虽然你最好保持原样（它保持 dom 整洁）但是当你再次单击按钮时你需要重新创建组件

【讨论】：