PDA

View Full Version : dynamic form in a window



tomalex0
4 May 2009, 5:40 AM
I have a window which have a form panel after submitting that form i want to remove the existing form and want to add new form, how can i achieve that

i tried as mentioned below


form1.destroy(); // form1 is the initial form existed

var form2 = new Ext.FormPanel({
width: 400,
frame: true,
height: 60,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 90,
fileUpload: true,
defaults: {
xtype:'textfield',
anchor: '95%',
allowBlank: false,
autoScroll : true,
msgTarget: 'side'
},
items: [{
id:'ssl_commonName',
fieldLabel: 'Domain Name'
}]
});
form2.render(Ext.get("id of window"));

now the new form is show under the window

nomack84
4 May 2009, 6:46 AM
The window is the one that must destroy the form. If you do it like you do, the form is destroyed but, is not erase from your window, so the other form2 is rendered below the form1.

syscobra
4 May 2009, 7:35 AM
you can try:

Ext.get("id of window").replace("");
after destroying the form.
maybe that clear all the contents and you can then render the new form...

nomack84
4 May 2009, 7:41 AM
you can try:

Ext.get("id of window").replace("");after destroying the form.
maybe that clear all the contents and you can then render the new form...

The Ext.get() won't work because window is a component, besides, replace is not a method of window component.

@syscobra, the solution you give, work only with elements, not with components

tomalex0
4 May 2009, 9:27 PM
I finally sort out how to dynamically remove a form in window and render new form in that window

below mentioned button is in the first form


buttons: [{
text: 'Create',
type: 'submit',
handler: function() {

this.window.remove(thisform); //removed first form
var thisform1 = new Ext.FormPanel({ //new form to be displayed in window
id: 'thisform1',
width: 400,
frame: true,
height: 260,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 90,
fileUpload: true,
defaults: {
xtype: 'textfield',
anchor: '95%',
allowBlank: false,
autoScroll: true,
msgTarget: 'side'
},
items: [{
id: 'name',
fieldLabel: 'Name'
}]
});
this.window.add(thisform1)
this.window.doLayout()

},
scope: this

}]

syscobra
5 May 2009, 9:22 AM
thanks for sharing.
Please remember to use [ code ] to place code in the messages, the way you are doing right now looks too awful...

Just paste your code then select it and in the toolbar above the advanced reply you have the "CODE" tags.

You can see how it gets in the "preview post".