Extjs 窗口在销毁后倾斜

Question

如果您按照此向导http://jsfiddle.net/8tBKa/ 进行操作，您将会看到。
按钮 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();
}

我会得到一个错误：Uncaught TypeError: Object #<Object> has no method 'getForm'
(http://jsfiddle.net/8tBKa/2/)

Answer 1

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

相反，只需使用附加了xtype 的配置。

Answer 2

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

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"
        }
    }]

});

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

（对 init 的修改并在窗口中添加了渲染侦听器）

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

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'
        }
    }]

});