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

我认为问题在于窗体窗口中的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（）未定义。我最终在窗口中添加了侦听器以满足窗口中的完成要求。工作小提琴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'
        }
    }]

});

摧毁后，Extjs窗口歪斜

2 个答案: