when formpanel add textfield which is removed

uncaught exception: [Exception... "Component returned failure code


var idField = Ext.create('Ext.form.Text',{fieldLabel: 'id', name:'id'});
var formPanel = Ext.create('Ext.form.FormPanel', {
renderTo: Ext.getBody(),
bodyPadding: 5,
width: 350,
url: '/user/add',
layout: 'anchor',
defaults: {
anchor: '100%'
},
defaultType: 'textfield',
items: [idField,
{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true,
disabled: true,
handler: function() {
var form = formPanel.getForm();

formPanel.remove(idField, true);

if (form.isValid()) {
form.submit({
success: function(form, action) {
formPanel.add(idField);//exception
//Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}]
});