PDA

View Full Version : Adding components to a form dynamically



moberg
14 Feb 2010, 12:44 PM
I am trying to dynamically add a field to a form when the user presses a button, but I can't really get it to work. This is my code:



Ext.ns('App', 'App.pagetype');

App.pagetype.EditForm = Ext.extend(Ext.form.FormPanel, {
//frame: true,
title: 'Properties',

/**
* initComponent
* @protected
*/
initComponent : function() {
this.labelAlign = 'left';
this.frame = true;
this.bodyStyle ='padding:10px 10px 0';

this.items = this.buildForm();
this.buttons = this.buildUI();

// super
App.pagetype.EditForm.superclass.initComponent.call(this);
},

buildForm : function() {

var result = new Array();

result.push([{
layout:'column',
items:[{
columnWidth:.18,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Name',
name: i + '__name',
anchor:'95%',
value: i,
disabled: true
}]
}]
}]);

}
return result;
},


buildUI: function(){
return [{
text: 'Add property',
iconCls: 'icon-add',
handler: this.onCreateNew,
scope: this
}
},


onCreateNew : function(btn, ev) {
this.getForm().add({ // This generates the error
xtype:'textfield',
fieldLabel: 'test',
name: 'test',
anchor:'95%',
value: 'test',
disabled: true

});
this.getForm().doLayout();
}
});


When pressing the button i get the following error: "o.getItemId is not a function". What am I doing wrong?

Eugen_
14 Feb 2010, 10:22 PM
this.getForm().add({ // This generates the error


Maybe this.add... ?

This is from API Documentation:


You will not usually call this function. In order to be rendered, a Field must be added to a Container (http://www.extjs.com/forum/../deploy/dev/docs/output/Ext.Container.html), usually an FormPanel (http://www.extjs.com/forum/../deploy/dev/docs/output/Ext.form.FormPanel.html). The FormPanel to which the field is added takes care of adding the Field to the BasicForm's collection.

moberg
15 Feb 2010, 2:25 AM
haha, that was almost a bit too easy. Too many hours of coding yesterday.

Thanks!