Hi Nikolaj
You will have to destroy or hide and disable the field you want to replace - in your case the password field.
Depending on whether you need the field again.
If you do need it again in the same page depending on user action - disable it (so as not to submit it with the form) and hide it.
The below example you can add onto the dynamic.js file in the examples/form directory or you can copy it and run it from the console in Firebug if you are familiar with that.
This code will run the changeFieldFunction when you click the button.
It will find the "password" field which is at index 1 of the form, destroy it, and then insert a "newField" at the same location.
When this has been inserted it finally calls the forms doLayout() method to re-render itself including the newField.
Hope it helps.
R.
PHP Code:
/*
* ================ Changing field form =======================
*/
//Define the handler to be used by the change field button
function changeFieldFunction() {
//Define the new field
newField = new Ext.form.TextField({
fieldLabel: 'New Field'
});
// end of newField
// Get the item you want to destroy
changeFieldForm.items.items[1].destroy();
// then insert the newField at the same index
changeFieldForm.insert(1, newField);
// then call the forms doLayout method to make it redraw itself with the new field included.
changeFieldForm.doLayout();
};
// end of changeFieldFunction
changeFieldForm = new Ext.FormPanel({
labelWidth: 75,
// label settings here cascade unless overridden
url: 'save-form.php',
frame: true,
title: 'Simple Form',
bodyStyle: 'padding:5px 5px 0',
width: 350,
defaults: {
width: 230
},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},
{
fieldLabel: 'Password',
inputType: 'password',
id: 'password',
name: 'password'
},
{
fieldLabel: 'Company',
name: 'company'
},
{
fieldLabel: 'Email',
name: 'email',
vtype: 'email'
},
new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
})],
buttons: [{
text: 'Change Password field to New Field',
handler: changeFieldFunction
}]
});
changeFieldForm.render(document.body);