Reputation: 11155
if you follow this wizard http://jsfiddle.net/8tBKa/ you will see that.
button 1 open a window.
button 2 destroy it.
button 3 recreate the window.
after the recreation, the window is skewed.
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 }
],
});
});
UPDATE 1
Thanks for the info, but, if I want to access the form from the window constructor, I actually cant.
If add the following function to the window:
constructor: function () {
this.items[0].getForm().load({/*bla bla*/});
this.callParent();
}
I will get an error: Uncaught TypeError: Object #<Object> has no method 'getForm'
(http://jsfiddle.net/8tBKa/2/)
Upvotes: 2
Views: 599
Reputation: 4355
I believe the issue lies with the create statement within the window for the form. Changing this got me the desired result:
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"
}
}]
});
In regards to update 1: Would you be able to add the constructor instead to the form?
(modifications to the init and added render listener to the window)
Because the form was not rendered yet, getForm() was undefined. I ended up adding listener to render in window to fulfill requirements of completion in window. Working fiddle available 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'
}
}]
});
Upvotes: 2
Reputation: 30082
Don't use Ext.create when you're defining the class. It means the form instance will be shared between window instances. So once the window is destroyed, so is the form and it remains with the window.
Instead, just use a configuration with the xtype
attached.
Upvotes: 5