Javascript Extjs窗口在destoy之后倾斜

如果您遵循此向导，您将看到。
按钮1打开一个窗口。
按钮2销毁它。
按钮3重新创建窗口

娱乐活动结束后，窗户歪了

Ext.define('MyWindow', {
    extend : "Ext.window.Window",
    title: 'Hello',
    height: 200,
    width: 400,
    closeAction: 'destroy',
    layout: 'fit',
    items: Ext.create('Ext.form.Panel', {              
        xtype: 'form',
        itemId: "Window",
        defaults: {
            labelAlign: 'top',
            msgTarget: 'side',
            labelWidth: 150,
            columnWidth: .33,
            padding: "10px 30x 10px 10px"
        },
        layout: {
            type: 'column',
            columns: 3,
            align: 'stretch'
        },
        items: {
            xtype: 'textfield',
            width: 100,
            fieldLabel: "Some input"
        }
    })

});

var win = false;
function show(){
    win = Ext.create("MyWindow");
    win.show();
}
function close(){
    win.close();
}

Ext.onReady(function () {
    Ext.create('Ext.Panel', {
        title : "Panel",
        renderTo: Ext.getBody(),
        items: [
            {xtype : "button", text : "Step 1 (Create window)", handler : show },
            {xtype : "button", text : "Step 2 (Destroy window)", handler : close },
            {xtype : "button", text : "Step 3 (Create NEW window)", handler : show }
        ],
    });
});

更新1

谢谢您提供的信息，但是，如果我想从窗口构造函数访问表单，我实际上不能。
如果在窗口中添加以下功能：

constructor: function () {
    this.items[0].getForm().load({/*bla bla*/});
    this.callParent();
}

我将得到一个错误：

uncaughttypeerror:Object#没有方法“getForm”

---

（）

定义类时不要使用Ext.create。这意味着窗体实例将在窗口实例之间共享。因此，一旦窗口被破坏，窗体也会被破坏，它将保留在窗口中

---

相反，只需使用附加了

xtype

的配置。

我认为问题在于表单窗口中的create语句。改变这一点让我得到了想要的结果：

Ext.define('MyWindow', {
    extend : "Ext.window.Window",
    title: 'Hello',
    height: 200,
    width: 400,
    closeAction: 'destroy',
    layout: 'fit',
    items: [{              
        xtype: 'form',
        itemId: "Window",
        defaults: {
            labelAlign: 'top',
            msgTarget: 'side',
            labelWidth: 150,
            columnWidth: .33,
            padding: "10px 30x 10px 10px"
        },
        layout: {
            type: 'column',
            columns: 3,
            align: 'stretch'
        },
        items: {
            xtype: 'textfield',
            width: 100,
            fieldLabel: "Some input"
        }
    }]

});

关于更新1：您能否将构造函数添加到表单中

（修改init并向窗口添加渲染侦听器）

由于表单尚未呈现，因此未定义getForm（）。最后，我添加了侦听器来在窗口中渲染，以满足在窗口中完成的要求。工作小提琴可用

---

谢谢，我已经更新了我的问题。它还没有解决，我不能从窗口访问表单。当然你不能，你还没有调用超类构造函数。如果你的意思是在构造函数上切换行，它不起作用，你能在JSFIDLE上修复它吗？谢谢汉克斯，我知道，你能读一下关于我问题的更新1吗？谢谢你，你的解决方案不起作用了，也不是我所需要的。我想从窗口而不是表单本身来访问表单，谢谢……很抱歉出错，它必须是initComponent，但是，由于表单尚未呈现，因此无论如何都无法工作。添加了要在解决方案窗口中渲染的侦听器，并添加了小提琴

Ext.define('MyWindow', {
    extend : "Ext.window.Window",
    title: 'Hello',
    height: 200,
    width: 400,
    closeAction: 'destroy',
    layout: 'fit',
    listeners:{
        render:function(win){
            console.log('getting here');
            win.down('form').getForm().load({"url":"hello"});
        }
    },
    items: [{              
        xtype: 'form',
        itemId: "Window",
        defaults: {
            labelAlign: 'top',
            msgTarget: 'side',
            labelWidth: 150,
            columnWidth: .33,
            padding: "10px 30x 10px 10px"
        },
        layout: {
            type: 'column',
            columns: 3,
            align: 'stretch'
        },
        items: {
            xtype: 'textfield',
            width: 100,
            fieldLabel: "Some input",
            name:'url'
        }
    }]

});