PDA

View Full Version : Dynamically creating and populating a form, from a datastore record



dve
4 May 2011, 1:56 AM
I am trying to dynamically populate a ExtJs FormPanel from a datastore record.
When the user clicks on a row in the GridPanel, the buildForm method is called and the clicked record is sent passed in as the first arg.

The below code (when debugging) appears to be working, but the doLayout method has no effect.

Can anyone point me in the right direction?



mymodule = Ext.extend(Ext.FormPanel, {
forceLayout: true,
initComponent: function () {
Ext.applyIf(this, {
id: Ext.id(),
labelWidth: 75,
defaultType: 'textfield',
defaults: {
style: 'padding-left:3px'
},
items: [{
layout: 'form',
border: false,
style: 'padding:5px',
defaults: {
style: 'padding-left:3px'
},
items: [{
fieldLabel: 'test',
xtype: 'textfield'
}, {
fieldLabel: 'test',
xtype: 'textfield'
}]
}]
});
mymodule.superclass.initComponent.call(this);
},
buildForm: function (record, c) {
var form = this.getForm();

var formItems = new Ext.util.MixedCollection();

Ext.each(record.fields.items, function (item) {
formItems.add(new Ext.form.TextField({
labelStyle: 'width:100px',
fieldLabel: item.name,
name: item.dataIndex,
id: 'field-' + item.name
}));
}, this);

form.items = formItems;

this.doLayout(false, true);

form.loadRecord(record);
}
});

Tim Toady
4 May 2011, 4:52 AM
I would use the add and removeAll functions that Ext provides for containers rather than trying to overwrite the items array. Just do a this.removeAll() above your add loop and in your add loop do this.add instead of formItems.add