ExtJs dynamically creates forms from a data warehouse record

Question

I am trying to dynamically populate ExtJs FormPanel from a data warehouse record. When the user clicks on a row in the GridPanel, the buildForm method is called and a clicked record is sent as the first argument.

The code below (when debugging) works, but the doLayout method does not work.

Can someone 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 correct way to add components to the form will use the add() method. If your form is already displayed, use the add() method, and then call doLayout() .

So you can try the following:

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