如何在ExtJS中单击按钮时打开模态

Question

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

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

Answer 1

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

            closeAction: 'hide'

如果您要构建一个大屏幕，最好还是保留它原样（这样会使dom保持整洁），但是您需要重新创建该组件，然后再次单击该按钮

Answer 2

因为默认情况下closeAction等于'destroy'，这意味着单击关闭按钮会破坏组件。 销毁myForm对象后，将无法再使用它。

解：
1）您可以将closeAction更改为“ hide”，然后单击关闭按钮组件将仅隐藏在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();
        }
    }
});