Take the 2-minute tour ×

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'
    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);

share|improve this question
add comment

1 Answer

up vote 4 down vote accepted

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:

share|improve this answer
thanks, in that case what is the correct way to remove items? As I need to clear the form first –  Dve May 4 '11 at 10:08
you can use remove() or removeAll() methods to remove components from the form –  Abdel Olakara May 4 '11 at 10:11
add comment

Your Answer


