ExtJs dynamically building a formpanel from a datastore record

Question

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',
            items: [{
                layout: 'form',
                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);
    }
});

Answer 1

The right way to add components to the form would be to use the add() method. If your form is already rendered, use the add() method and then call doLayout().

So you might want to try this:

form.add(formItems);
form.doLayout(false,true);
form.loadRecord(record);